javascript jsTree：如何在第一次可视化时扩展所有节点，然后使用“cookies”插件保存和恢复状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17605722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsTree: How to expand all nodes on first visualization and then save and restore state with 'cookies' plugin
提问by Flexer
I plan to use jsTree to visualize tree like structures and I would like to achieve the following behavior:
我计划使用 jsTree 来可视化树状结构，我想实现以下行为：
- on first time visualization I want to have all nodes expanded
- any consecutive visualizations will restore to the previous state of the tree structure utilizing the "cookies" plugin
- 在第一次可视化时，我想扩展所有节点
- 任何连续的可视化都将使用“cookies”插件恢复到树结构的先前状态
Constraints:
约束：
- I use json objects to populate the tree
- I can't use 'initially_open' attribute to list IDs for the first visualization because it will be hard to determine the initial IDs
- 我使用 json 对象来填充树
- 我不能使用“initially_open”属性来列出第一个可视化的 ID，因为很难确定初始 ID
In other words I want to achieve something similar to a) change the default state of node to 'open' or b) determine if this is the first visualization (probably by examining the 'cookie' plugin attributes if we don't have state persisted) and if so then call 'open_all'
换句话说，我想实现类似于 a) 将节点的默认状态更改为“打开”或 b) 确定这是否是第一个可视化（如果我们没有状态持久化，可能通过检查“cookie”插件属性） )，如果是，则调用“open_all”
Ideas are appreciated. Thanks!
想法表示赞赏。谢谢！
回答by Matt
To expand all nodes, simply use
要扩展所有节点，只需使用
$("#treeView").jstree("open_all");
You can include it in the initial load, like so
您可以将它包含在初始加载中，就像这样
$('#treeView').jstree(
{
"themes": {
"theme": "default",
"dots": false,
"icons": false
},
"plugins": ["themes", "html_data", "checkbox", "ui"]
}).jstree("set_theme", "apple")
.bind("loaded.jstree", function (event, data) {
$(this).jstree("open_all");
});
Likewise, if you want to check all elements, use
同样，如果要检查所有元素，请使用
$(this).jstree("check_all");
Regarding cookies, I haven't used it, but there is a plugin named jquery.cookie.jsavailable. I suppose it contains methods to load/save data from/to a cookie. You have to bind another event, such as
关于cookies，我没用过，不过有个插件叫jquery.cookie.jsavailable。我想它包含从/向 cookie 加载/保存数据的方法。你必须绑定另一个事件，比如
.bind("change_state.jstree", function (evt, data) { ... } );
to capture the state-change and the initial loading in the loaded.jstreeevent would read from the cookie. Please check out this linkto read more about cookie handling, both is mentioned - how you can use it with or without this plugin.
捕获状态更改和loaded.jstree事件中的初始加载将从 cookie 中读取。请查看此链接以阅读有关 cookie 处理的更多信息，两者都提到了 - 无论是否使用此插件，您都可以使用它。
Update:jquery.cookie.jshas been superseded by js-cookie, which has the functions Cookies.set('name', 'value'), var cval = Cookies.get('name');and Cookies.remove('name');for cookie handling.
更新：jquery.cookie.js已被取代JS-cookie的，其具有的功能Cookies.set('name', 'value')，var cval = Cookies.get('name');以及Cookies.remove('name');对cookie处理。
The following snippet, which is a modified jsTree example, has 2 child nodes beneath Root node 2, which expands immediately after the control is loaded:
以下代码段是修改后的jsTree 示例，其下方有 2 个子节点Root node 2，在加载控件后立即展开：
$(document).ready(function() {
$('#treeView').jstree({
'core': {
'data': [{
"id": "ajson1",
"parent": "#",
"text": "Simple root node"
},
{
"id": "ajson2",
"parent": "#",
"text": "Root node 2"
},
{
"id": "ajson3",
"parent": "ajson2",
"text": "Child 1"
},
{
"id": "ajson4",
"parent": "ajson2",
"text": "Child 2"
},
]
}
})
.bind("loaded.jstree", function(event, data) {
$(this).jstree("open_all");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeView">
</div>回答by mikus
Matt's answer is all fine, but as jstree v3 is concerned use the ready.jstreeevent instead, so long story short:
马特的回答一切都很好，但就 jstree v3 而言，请改用ready.jstree事件，长话短说：
$('#treeView').jstree(treeOptions)
.bind("ready.jstree", function (event, data) {
$(this).jstree("open_all");
});
