jsTree：progressive_render 与 ajax / 从数组渲染节点

Question

这是关于jsTree jQuery plugin。我已经为此苦苦挣扎了一段时间才意识到这是 （本机）不可能做到，所以我想到了下面我的问题的以下解决方案（这不起作用）。

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

我想到的解决方案是限制从 服务器减少到一个较小的数字（比如 200）并使用一些“显示更多” 标签（或使用 jQuery 滚动事件）来获取下一个 200。 但是，在每个节点上使用 jstree.create 似乎是 非常慢。 然后我注意到这个线程on the jsTree google group Ivan 在其中建议可以使用一次创建所有节点 parse_json 函数 - 这对我不起作用。

我正在尝试做的简短代码 sn-p： （点击“显示更多”标签时）：

$.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"}]