jsTree：progressive_render，带有来自数组的ajax / render节点

这是关于jsTree jQuery插件 。 我已经苦苦挣扎了一段时间，但现在却意识到它不是（原生）可能做到的，所以我想到了以下问题的解决方案（这不起作用）。

我有一个使用带有ajax的json_data插件的树。 打开特定节点后，服务器的结果是超过1000个json节点的数组。 响应非常快，但渲染本身需要一段时间（用户体验是他得到令人讨厌的“脚本没有响应 – 停止脚本/继续”消息。

我想到的解决方案是将从服务器发回的结果限制为较小的数字（比如200）并使用一些“显示更多”标签（或使用jQuery滚动事件）来获取下一个200.但是，使用jstree。在每个节点上创建似乎都很慢。 然后我注意到jsTree google组中的这个post，其中Ivan建议可以使用parse_json函数一次创建所有节点 – 这对我不起作用。

我正在尝试做的简短代码片段:(点击“显示更多”标签时）：

$.ajax({ // send data to server in order to get the relevant json back }(), success : function (r) { var parent_node = data.inst._get_parent(data.rslt.obj); var id = parent_node.attr("id"); $("#root_tree").jstree("_parse_json", r, parent_node ); $("#root_tree").jstree("clean_node", parent_node, false); } }); 

上面的示例不呈现json并将子项添加到父节点。

我非常感谢任何其他方法，或者如果有人能够指出我做错了什么。 再次，使用：

 $.each(r, function(i, node) { var id = parent_node.attr("id"); $("#root_tree").jstree("create", "#"+id, "last", node, false, true); }); 

有效，但非常慢（比将所有1000个节点一起渲染慢）。

谢谢

Answer 1

好的，所以我的使用有点偏。

我最终做的是在树视图上调用函数而不是监听事件：

  var ref = parent_node.attr("id"); $.each(data, function(i, jsonNode) { var node = inst._parse_json(jsonNode); node.insertInside(ref); }); 

Answer 2

这就是我设置树的方式，我有几百个节点，它就像一个魅力。 我确实在IE6 / 7中有一个非常轻微的性能问题，但在其他地方就像一个冠军。

 $('#serverTree').bind("select_node.jstree", function (e, data) { var url = data.rslt.obj.children("a:eq(0)").attr("href"); if (url === "hasChild") { data.inst.toggle_node(data.rslt.obj); } else { //Do something when the leaf nodes are clicked } }).jstree({ "themes": { "theme": "apple", "dots": false, "icons": false }, "json_data": { "ajax": { "url": "/Home/GetNodes", "data": function (n) { return { id: n.attr ? n.attr("id") : 0 }; } } }, "plugins": ["themes", "json_data", "ui"] }); 

这就是我从服务器回来的JSON的样子：

 [{"data":{"title":"Node1","attr":{"id":null,"href":"hasChild"}}, "attr":{"id":"Node1","href":null},"state":"closed"}]