jQuery 如何使用 JSON 初始化 jsTree
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7952305/
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
How to initialize jsTree using JSON
提问by Pavel F
I make jsTree by this way:
我通过这种方式制作 jsTree：
$("#myTree").jstree({
"plugins": ["themes", "json_data", "ui", "crrm", "dnd"],
"themes": {
"theme": "default",
"dots": false,
"icons": false,
"url": "../../Content/jsTreeThemes/default/style.css"
},
"json_data": {
"data" : []
}
});
And user sees page with empty jsTree. I must initialize my jsTree when user make some action. But I musn't use ajax initialization (I musn't use "ajax" in "json_data"). I must initialize my jsTree using only string like this:
并且用户看到带有空 jsTree 的页面。当用户执行某些操作时，我必须初始化我的 jsTree。但是我不能使用ajax初始化（我不能在“json_data”中使用“ajax”）。我必须只使用这样的字符串来初始化我的 jsTree：
var stringJSON = [{
"attr": {
"id": "1",
"rel": "root",
"mdata": null
},
"data": "title": "root_jsTree",
"icon": null
}, "state": "open",
"children": [{
"attr": {
"id": "7",
"rel": "folder",
"mdata": null
},
"data": {
"title": "1",
"icon": null
},
"state": "",
"children": [{
"attr": {
"id": "10",
"rel": "folder",
"mdata": null
},
"data": {
"title": "leaf",
"icon": null
},
"state": "",
"children": []
}]
}, {
"attr": {
"id": "8",
"rel": "folder",
"mdata": null
},
"data": {
"title": "leaf",
"icon": null
},
"state": "",
"children": [{
"attr": {
"id": "9",
"rel": "folder",
"mdata": null
},
"data": {
"title": "leaf",
"icon": null
},
"state": "",
"children": []
}]
}]
}]'
No matter how I receive this string, when user wants see tree I've already had this string. And here I get question: How can I initialize jsTree and display it for user using only string below.
不管我如何接收这个字符串，当用户想要看到树时，我已经有了这个字符串。在这里我得到问题：如何初始化 jsTree 并仅使用下面的字符串向用户显示它。
采纳答案by Radek
Probably you want something like that? http://jsfiddle.net/radek/fmn6g/11/
也许你想要这样的东西？http://jsfiddle.net/radek/fmn6g/11/
- Where I insert jsTree on a button click.
- The javascript on click function inserts 'jstree' div and also contains jsTree definition.
- As you can see I also use json data type.
- 我在单击按钮时插入 jsTree 的位置。
- javascript on click 函数插入'jstree' div 并且还包含jsTree 定义。
- 如您所见，我也使用 json 数据类型。
More info in my question display jsTree on click
我的问题中的更多信息在单击时显示 jsTree
Is that what you are after?
这就是你所追求的吗？
回答by Pavel F
Here is my solution:
这是我的解决方案：
var jsTreeSettings = $("#myTree").jstree("get_settings");
jsTreeSettings.json_data.data = $.parseJSON(stringJSON);
$.jstree._reference("myTree")._set_settings(jsTreeSettings);
// Refresh whole our tree (-1 means root of tree)
$.jstree._reference("myTree").refresh(-1);
This solution will work even if we set up AJAX for loading model before.
即使我们之前为加载模型设置了 AJAX，这个解决方案也能工作。
From documentation:
从文档：
If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.
如果同时设置了 data 和 ajax，则从数据字符串呈现初始树。当打开一个关闭的节点（没有加载的子节点）时，会发出一个 AJAX 请求。
More information is here http://www.jstree.com/documentation/json_data
更多信息在这里http://www.jstree.com/documentation/json_data
I decided to use this solution because I must change stringJSONseveral times and rebuild tree using this changed string (without reloading page).
我决定使用此解决方案，因为我必须stringJSON多次更改并使用此更改后的字符串重建树（无需重新加载页面）。
