CODEWITHSUNDEEP
javascriptjqueryjstree
Lumi
Lumi

Reputation: 15274

jstree: incremental loading

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.

Upvotes: 0

Views: 6145

Answers (1)

Dave L.
Dave L.

Reputation: 9791

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.

Upvotes: 2

Related Questions