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

2022-01-19 00:00:00 json frontend jquery javascript jstree

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

This is regarding the jsTree jQuery plugin. I've been struggling with this for a while now only to realise it's not (natively) possible to do, so I thought about the following solution to my problem below (which doesn't work).

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

I have a tree that uses the json_data plugin with ajax. Once you open a specific node the result from the server is an array of over 1000 json nodes. The response is pretty fast but the rendering itself takes a while (the user experience is that he gets the annoying "script not responding - stop script / continue" message.

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

The solution I thought about was limiting the results sent back from the server to a smaller number (say 200) and using some "show more" label (or using the jQuery scroll event) to fetch the next 200. However, using the jstree.create on each of those nodes appears to be very slow. I then noticed this thread on the jsTree google group in which Ivan suggest it's possible to create all nodes at once using the parse_json function - this doesn't work for me.

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

A short code snippet of what I'm trying to do: (when clicking the "show more" label):

$.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 并将子元素添加到父节点.

The above example doesn't render the json and adds the children to the parent node.

我非常感谢任何其他方法，或者如果有人可以指出我做错了什么.同样，使用:

I would highly appreciate any other approach or if anyone could point out what am I doing wrong. Again, using:

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

确实有效，但非常非常慢(比渲染所有 1000 个节点慢一起).

Does work, but very very slowly (slower than rendering all 1000 nodes together).

谢谢

推荐答案

好的，所以我的用法有点不对.

Ok, so my usage was a bit off.

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

What I ended up doing, was calling the function on the tree view instead of listening to the event:

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

相关文章