How to download children on demand using the new jstree v3.0.0

Question

I am looking for a little help, populating child nodes on demand (when expanding) in jstree. I can fill in the parent nodes, but did not manage to fill in the child nodes.

Scenario:

I use jstree to populate the nodes in the tree. My data source is json. However, I get parent nodes from another service and child nodes from another service.

I am using the new version of jstree 3.0.0 found here: https://github.com/vakata/jstree/zipball/3.0.0-beta8

What challenge do I face ?:

I want to load child and child objects on demand when the user extends the parent node. There may be hundreds of companies, thousands of sites and millions of agents, and therefore it is impossible to download all the data right away ... (i.e., combining results. Companies, sites and agents work together, but are undesirable due to performance problems).

The code samples found here: http://www.jstree.com/docs/json/ are pretty implicit, and I could only populate the parent nodes using the provided sample. Perhaps someone faced with a similar solution can help me find a suitable solution.

It is required:

Also, I need to load 3 layers of children, think of a scenario:

Example script:

Company1 -Site1 --Agent1 --Agent2 -Site2 --Agent3 --Agent4

Societies2 -Site3 --Agent5 -Site4 --Agent6 --Agent7

the code:

( ):

$('#agentsTreev2').jstree({
            "plugins": ["contextmenu", "dnd", "search", "sort", "state", "types", "unique", "wholerow"],
            'core': {
                'data': {

                    'url': function (node) {
                        console.log(node.id);
                        return node.id === '#' ?
                                        'http://localhost:21282/data.svc/Companies?$format=application/json;odata=nometadata;'
                            :
                                        'http://localhost:21282/data.svc/Sites?$select=Site_Id,Name,Company_Id&$filter=Company_Id eq 24&$format=application/json;odata=nometadata;';

//^^^^ url /, url node

                    },
                    'crossDomain': 'true',
                    'type': 'GET',
                    'dataType': 'json',
                    'contentType': 'application/json',
                    'cache': false,
                    'success': function (response) {
                        return response;
                    },
                    'dataFilter': function (data, type) {

                        if (type == "json") {
                            //Replace Name to title so that dynatree can render Title text
                            data = data.replace(/Name/g, "title");
                            //Convert to Json object to allo addition of custom Object
                            var jsonObj = JSON.parse(data);
                            //Hack for WCF Service like in all the functions above.
                            jsonObj = jsonObj.value;

                            for (var i = 0; i < jsonObj.length; i++) {

                                //jstree specific values
                                jsonObj[i]["id"] = jsonObj[i]["Company_Id"];
                                jsonObj[i]["text"] = jsonObj[i]["title"];
                                jsonObj[i]["parent"] = '#';
                                jsonObj[i]["state"] = "closed";
                            }
                            data = JSON.stringify(jsonObj);
                        }

                        return data;
                    },
                    'error': function (node, XMLHttpRequest, textStatus, errorThrown) {
                        // Called on error, after error icon was created.
                        alert('Get Company error: ' + textStatus + ' detail: ' + errorThrown);
                        //return "-1";
                    }
                }
            }
        });

( ):

{"value":[{"Company_Id":"31","Name":"E-Dev"},{"Company_Id":"35","Name":"ggggggggggggg"},{"Company_Id":"36","Name":"ggggggggggggg"},{"Company_Id":"37","Name":"ghhhhhhhhhhhhhhhhhhhhhhh"},{"Company_Id":"38","Name":"kjjkhkh jkhh kjh khkh hkhk"},{"Company_Id":"39","Name":"iiiiiiiiiiiiiiiiii"},{"Company_Id":"40","Name":"dsfhdskfjh"},{"Company_Id":"41","Name":"dfjshfkjds"},{"Company_Id":"42","Name":"dfjshfkjds"},{"Company_Id":"43","Name":"dfjshfkjds"},{"Company_Id":"44","Name":"dfjshfkjds"},{"Company_Id":"45","Name":"dfjshfkjds"},{"Company_Id":"46","Name":"dfjshfkjds"},{"Company_Id":"47","Name":"dfjshfkjds"},{"Company_Id":"48","Name":"dfjshfkjds"},{"Company_Id":"49","Name":"dfjshfkjds"},{"Company_Id":"50","Name":"dfjshfkjds"},{"Company_Id":"51","Name":"dfjshfkjds"},{"Company_Id":"52","Name":"dfjshfkjds"},{"Company_Id":"53","Name":"dfjshfkjds"},{"Company_Id":"54","Name":"dfjshfkjds"},{"Company_Id":"55","Name":"dzfdfskdfh"},{"Company_Id":"56","Name":"sdfhdsfh"},{"Company_Id":"57","Name":"jfhjdsfhsdhfj"},{"Company_Id":"58","Name":"fdhafksdfkjdsfhsdk"},{"Company_Id":"59","Name":"dfksdfhksdhfkskd"},{"Company_Id":"60","Name":"test"},{"Company_Id":"61","Name":"test"},{"Company_Id":"62","Name":"ErnestDev"},{"Company_Id":"63","Name":"EarnestDev"},{"Company_Id":"64","Name":"Earnestdev"},{"Company_Id":"65","Name":"hsdkfhksdhkfjh"}]}

( ):

{"value":[{"Site_Id":"31","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"35","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"36","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"38","Company_Id":"24","Name":"Nottingham"}]}

( )

{"value":[{"Agent_Id":"61","Name":"","Site_Id":"40"},{"Agent_Id":"62","Name":"","Site_Id":"41"},{"Agent_Id":"63","Name":"","Site_Id":"42"},{"Agent_Id":"64","Name":"","Site_Id":"43"},{"Agent_Id":"65","Name":"","Site_Id":"44"},{"Agent_Id":"66","Name":"","Site_Id":"45"},{"Agent_Id":"67","Name":"","Site_Id":"46"},{"Agent_Id":"180","Name":"","Site_Id":"49"},{"Agent_Id":"181","Name":"","Site_Id":"49"},{"Agent_Id":"182","Name":"","Site_Id":"49"},{"Agent_Id":"183","Name":"","Site_Id":"49"},{"Agent_Id":"184","Name":"","Site_Id":"49"}]}

, , wcf odata CORS enabled. , .

, , , .

I .

. , jstree..: (

:

, :

Answer 1

() initAjax, ajax , .

Answer 2

$('#agentsTreev2').on('check_node.jstree', function (e, data) {
    data.instance.load_node(data.node);
});

ajax