JsTree: progressive_render with ajax / render nodes from an array

Question

This applies to the jsTree jQuery plugin . I struggled with this for a while, only to realize that this is not possible (initially), so I thought about the next solution to my problem below (which does not work).

I have a tree that uses the json_data plugin with ajax. As soon as you open a specific node, the result from the server is an array of more than 1000 json. The answer is pretty quick, but the rendering itself (the user experience is that it gets the annoying "script not replying - stop script / continue".

The solution I was thinking of was limiting the results sent from the server to a smaller number (say 200) and using some “show more” (or using the jQuery scroll event) to get the next 200. However, using jstree.create on each of these nodes seems to be very slow. Then I noticed this chain in the google jsTree group in which Ivan suggests creating all nodes at once using the parse_json function - this does not work for me.

A short code snippet of what I'm trying to do: (by clicking on 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); } }); 

The above example does not display json and adds children to the parent node.

I would greatly appreciate any other approach, or could indicate what I am doing wrong. Again using:

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

It works, but very slowly (slower than rendering all 1000 nodes together).

thanks

Answer 1

Good, so my use was a bit off.

What I ended up calling a function in a tree view instead of listening to an event:

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

Answer 2

This is how I installed my tree, and I have more than a few hundred nodes, and it works like a charm. In IE6 / 7, I had a very small performance issue, but everywhere it works like a champion.

 $('#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"] }); 

So my JSON returning from the server looks like this:

 [{"data":{"title":"Node1","attr":{"id":null,"href":"hasChild"}}, "attr":{"id":"Node1","href":null},"state":"closed"}]