0

The JStree plugin for jQuery allows you to load data to feed a navigable tree GUI element provided by the library.

For small trees, just load them all in memory, and you're done. But for large trees, that might not be a good solution. The all-in-memory approach doesn't scale.

Think 6000 nodes (or 60,000), most of which will never be relevant to the user viewing the page. Wouldn't it then be better to load only the first level of branches and incrementally load more branches following the user's clicks along what's already displayed? It certainly would.

You'd mark the tree where it has missing branches, then you'd load the missing branches on demand, remove the mark from the tree, graft the branch onto the tree, and proceed in that manner recursively if necessary.

How do you do imcremental loading? I found a question from 2009 pertaining to the same problem, but the API appears to have changed. Does anyone have a recipe of how to proceed for the current version of the library?

Note incremental loading is not the same as incremental rendering, which is another optimization already provided by the library.

Community
  • 1
  • 1
Lumi
  • 14,775
  • 8
  • 59
  • 92
  • 2
    What code doesn't work for you? Could you provide code sample? This works for me This works for me http://stackoverflow.com/questions/8078534/jstree-loading-subnodes-via-ajax-on-demand/8087897#8087897 – Radek Nov 23 '11 at 00:00
  • Thanks, @Radek - [your answer over there](http://stackoverflow.com/q/8087897/269126) is spot on, just `state="closed"` and no children and an `ajax` handler object, that'll trigger requests to load subtrees on demand. Upvoted your answer over there. – Lumi Nov 24 '11 at 20:16

1 Answers1

2

Lumi, that is how the plugin works.

Have a look at the Demo page, about half way down, at the section "PHP & mySQL demo + event order". The example uses the JSON format for transmitting data, which is the de facto standard, but the plugin also supports other formats. When you expand a parent node, an AJAX request is made to load the next level of nodes.

Dave L.
  • 9,595
  • 7
  • 43
  • 69
  • David, the demo page you're referring to does not currently show the setup to load data on demand, which requires nodes to carry the `state="closed"` attribute and have no children, implying there are some to be loaded. The [json_data page](http://www.jstree.com/documentation/json_data) (which I didn't read as I was starting with XML), however, does contain a fat **NOTE** pertaining to AJAX and on-demand loading. This info is only implied (but not clearly stated) on the [xml_data page](http://www.jstree.com/documentation/xml_data). I'm accepting your answer anyway as it's the only one. :) – Lumi Nov 24 '11 at 20:25