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

Posted 2023-02-22

【中文标题】jsTree：progressive_render 与 ajax / 从数组渲染节点

【英文标题】：jsTree: progressive_render with ajax / render nodes from an array

【发布时间】：2012-03-13 16:20:02

【问题描述】：

这是关于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 个节点慢 一起）。

谢谢

【问题讨论】：

根据 Ivan 的建议，这听起来像 _parse_json 返回一个您可以附加的 DOM 树 (parent_node.append(result)?)。您是否深入研究过 JSON_DATA 插件源以了解该方法的实际作用？

【参考方案1】：

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

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

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

【参考方案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"]

【讨论】：

谢谢，但这是 jstree 的“正常”用法。如果您有几千个节点并且用户体验非常糟糕，它会变得非常慢。遗憾的是我不再从事这个项目，但我认为正确的做法是：$(this)._parse_json(<array of nodes>,<pnode to attach>).