How to append JSON in the JSTREE and corresspondingly nodes are added in the UI?

[Tree Rocker]

I want to append nodes at the runtime by appending JSON. Please let me know how I can achieve this.

For example:

1. There are 100 nodes in the JSTREE model and in JSTREE UI.
2. Now I want to add 100 more nodes in JSTREE model and it should reflect on its UI.

Please help me how I can achieve this. Thanks in advance:)

[Ivan Bozhanov]

If they are on different levels - it will be a bit easier. You can even use the jstree "data" function option (basically this is the load_node functionality, it just does not have to come from an AJAX call).
If they are on the same level it would be a bit harder. You can always do a for loop and use "create_node" for each new node, but keep in mind it will be slow.
There are other options too - calling load_node and returning the whole 200 nodes, etc.

If it is paging you are after - that will be harder, you'd be better off packaging it as a plugin, and looking and the _load_node, _append_json_data, _parse_model_from_json functions for examples on how to populate data in the model.
Why do you need such functionality - 200 nodes are not that many - jstree won't choke on that. If it is some sort of external script adding new data - simply refresh the instance and return the new data as a whole (200 nodes).

[Tree Rocker]

Thanks for the quick reply Ivan.
Actually the scenario is something like that:

Initially:

Node 1
Node 2
 .
 .
 .
 .
Node 100

After loading next 100:

When click on some button another 100 nodes will be added

Node 1
Node 2
 .
 .
 .
 .
Node 100
 .
 .
 .
 .
Node 200

After Next 100:


Node 1
Node 2
 .
 .
 .
 .
Node300

And so on. All the nodes are top level nodes.

[Ivan Bozhanov]

Currently this is not possible out of the box - you will have to fiddle around and call some functions manually, or use the create method I mentioned in the previous post.