jstree 怎么保存选中状态 下次页面刷新还原回去
时间: 2024-02-19 16:29:45 浏览: 27
jstree 可以通过选项 `core.state` 来自动保存选中状态。当用户选择节点时,`core.state` 选项会自动将所选节点的 id 保存到浏览器的本地存储中。下次加载页面时,`core.state` 选项会自动将之前保存的选中状态还原。
具体使用方法如下:
1. 在初始化 jstree 时,设置 `core.state` 选项:
```
$('#jstree').jstree({
'core' : {
'state' : {
'key' : 'myTreeState'
}
},
// 其他选项...
});
```
其中,`key` 参数指定保存状态时使用的键名。
2. 在页面加载时,从浏览器的本地存储中读取之前保存的状态:
```
$(function() {
var treeState = localStorage.getItem('myTreeState');
if (treeState) {
$('#jstree').jstree(true).restore_state(JSON.parse(treeState));
}
});
```
其中,`restore_state` 方法将保存的状态还原到 jstree 中。需要注意的是,`restore_state` 方法需要传入一个 JSON 对象,因此需要先将从本地存储中读取到的字符串转换为 JSON 对象。
3. 在用户选择节点时,自动保存选中状态:
```
$('#jstree').on('changed.jstree', function(e, data) {
localStorage.setItem('myTreeState', JSON.stringify($('#jstree').jstree(true).get_state()));
});
```
其中,`changed.jstree` 事件会在用户选择节点时触发,`get_state` 方法可以获取当前 jstree 的状态,并将其转换为 JSON 对象。然后将其保存到浏览器的本地存储中。
通过以上步骤,就可以实现 jstree 的选中状态自动保存和还原了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)