Lazy loading with jsTree

Question

I am trying to dynamically load the nodes of a jtree when they are expanded. The little documentation I found is at the end of this page.

I found some solutions that cre

Answer 1

To make a lazy loading, you need a backend that returns a JSON object with tree nodes that has children property field. Children property must contain children elements or boolean true (array or boolean). With a strongly typed language on your backend it is going to be ugly, so its best to deal with it on frontend. Example of AJAX success callback:

$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : function(node) {
                return '/doc/test2';
            },
            'data' : function(node) {
                return {
                    'part' : node.id === '#' ? pn : node.id
                };
            },
            'success' : function(nodes) {

                var validateChildrenArray = function(node) {

                    if (!node.children || node.children.length === 0) {
                        node.children = true;
                    }
                    else {
                        for (var i = 0; i < node.children.length; i++) {
                            validateChildrenArray(node.children[i]);
                        }
                    }
                };

                for (var i = 0; i < nodes.length; i++) {
                    validateChildrenArray(nodes[i]);
                }
            }
        }
    }
});

By doing this, you are going to be able to lazy load your tree.