javascript 如何让jstree与ajax加载的内容正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20647542/
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 get jstree to work properly with ajax loaded content
提问by Brandon M.
For a project I am trying to create an ajax-powered treeview control. My ajax scripts are working fine on the back end, but the tree is not being displayed properly. When I hard code the ajax response into my tree container, it is displayed properly:
对于一个项目，我正在尝试创建一个由 ajax 驱动的树视图控件。我的 ajax 脚本在后端工作正常，但树没有正确显示。当我将 ajax 响应硬编码到我的树容器中时，它会正确显示：
However, when I try to load the tree via ajax I get this:
但是，当我尝试通过 ajax 加载树时，我得到了这个：
Here is my JS code:
这是我的 JS 代码：
$(document).ready(function() {
function customMenu(node) {
var items = {
createItem : {
label : "Generate random number(s)",
action: function() {
console.log("Creating children...");
var selectedId = $("#treeview").jstree("get_selected").attr("id");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "libs/add.php",
data: "fact_id=" + selectedId,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
}
}
return items;
}
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"], contextmenu: {items: customMenu, select_node: true}
});
$.ajax({
url: "libs/display.php",
dataType: "json"
}).success(function(data) {
$("#treeview ul").append(data);
});
});
Does anyone have any idea what my problem is? Any help would be appreciated.
有谁知道我的问题是什么？任何帮助，将不胜感激。
EDITAfter looking closer, I realize that the exact problem is that the necessary classes are not being added to the child nodes when calling via ajax. Still, I'm not sure why.
编辑仔细观察后，我意识到确切的问题是通过 ajax 调用时没有将必要的类添加到子节点。不过，我不确定为什么。
ANOTHER EDITdisplay.phpnow contains this response text:
另一个编辑display.php现在包含此响应文本：
[
{
"attr": {
"id": 1
},
"data": 649,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 108,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 86,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 46,
"state": "closed"
}
]
Am I headed in the right direction?
我是否朝着正确的方向前进？
回答by Robbie Averill
Is your stylesheet being included, and have you set up correct URLs to the icons? It looks to me like that's why your data isn't being styled. However, looking at your code, a more likely reason that you aren't getting your styling is because you are just calling an arbitrary AJAX call outside the jsTree scope.
是否包含您的样式表，并且您是否为图标设置了正确的 URL？在我看来，这就是为什么您的数据没有设置样式的原因。但是，查看您的代码，您没有获得样式的一个更可能的原因是您只是在 jsTree 范围之外调用了任意 AJAX 调用。
Take a look at the docs for the json_datapluginfor jsTree. It's easy to use, provided you set up display.phpcorrectly to only fetch the node that jsTree is requesting. It will make concurrent calls and get the nodes it needs, your script simply needs to serve them to it:
查看json_datajsTree插件的文档。它易于使用，前提是您display.php正确设置为仅获取jsTree 请求的节点。它将进行并发调用并获取所需的节点，您的脚本只需要为它们提供服务：
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"],
"contextmenu": {
items: customMenu,
select_node: true
},
"json_data": {
"ajax": {
"url": "libs/display.php",
"data": function(n) {
return { id : n.attr ? n.attr("id") : 0
}
}
}
});
The json_dataplugin basically acts as a wrapper for a jQuery AJAX call, but the events are bound directly the jsTree core and the returned results are handled by jsTree. You'll probably need to tweak your return values a bit depending on what display.phpis responding with, and what you have set your tree up to look like structurally.
该json_data插件基本上充当 jQuery AJAX 调用的包装器，但事件直接绑定到 jsTree 核心，返回的结果由 jsTree 处理。您可能需要根据display.php响应的内容以及您将树设置为结构上的样子稍微调整您的返回值。
Edit
编辑
This is a similar post that might help you: jsTree and AJAX > Load all data via ajax
这是一篇可能对您有所帮助的类似帖子： jsTree and AJAX > Load all data via ajax
