jsTree:具有来自数组的ajax /呈现节点的progressive_render

Question

这是关于jsTree jQuery plugin的。我已经在这个问题上挣扎了一段时间，现在才意识到这是不可能的，所以我考虑了下面这个问题的解决方案(它不起作用)。

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

我考虑的解决方案是将从服务器返回的结果限制为一个较小的数字(例如200)，并使用一些“显示更多”标签(或使用jQuery滚动事件)来获取下一个200。但是，在这些节点上使用jstree.create似乎非常慢。然后我注意到这个线程on the jsTree google group，其中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"}]