jsTree async with preloaded data.

Question

I am trying to make a tree view be async. When the page is rendered, there is default tree items displayed. jsTree tries to reload the root anyway.

I want the page to render (with jsTree init'ed) with default items rendered from browser, not the ajax call. Then we the user tries to go deeper, thats when I want to do do the ajax calls.

Any help is appreciated. Thanks!

Answer 1

Have you looked at this example? This creates the tree from static JSON data on the first initialization You could probably use the same concept to initialize using static HTML markup.

Answer 2

From Documentation: If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.

An example,

$(function () {
$("#demo4").jstree({ 
    "json_data" : {
        "data" : [
            { 
                "data" : "A node", 
                "state" : "closed"
            },
            { 
                "attr" : { "id" : "li.node.id" }, 
                "data" : { 
                    "title" : "Long format demo", 
                    "attr" : { "href" : "#" } 
                } 
            }
        ],
        "ajax" : { "url" : "/static/v.1.0rc/_docs/_json_data.json" }
    },
    "plugins" : [ "themes", "json_data" ]
});
});