jsTree：使用 ajax 进行渐进式渲染/从数组中渲染节点

Question

这是关于 jsTree jQuery 插件。我已经为此苦苦挣扎了一段时间，现在才意识到 （本身）不可能做到，所以我考虑了以下解决方案来解决我的问题（这不起作用）。

我有一棵树，它使用 json_data 插件和 ajax。一旦你打开 特定节点，服务器返回的结果是超过 1000 个的数组 json 节点。响应速度相当快，但渲染本身需要 一会儿（用户体验是他得到了烦人的“脚本不 响应 - 停止脚本/继续”消息。

我想到的解决方案是限制发回的结果 将服务器设置为较小的数字（例如 200）并使用一些“显示更多” 标签（或使用 jQuery 滚动事件）来获取接下来的 200 个。 但是，在每个节点上使用 jstree.create 似乎是 非常慢。 然后我注意到 jsTree google 群组上的这个帖子 其中 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"}]