Pascal Homberg
Pascal Homberg

Reputation: 83

Jstree - load child nodes after clicking on parent (json)

I want to load the child nodes of a parent node after clicking on the parent node. Because there are many childs this is the only way to keep the performance high.

Now I got this

$(function () {
    $.support.cors = true;
    $('#using_json').jstree({
        "plugins": ["themes", "json_data", "dnd", "wholerow"],
            'core': {
            'data': {
                'url': "http://localhost:56311/ProductRESTService.svc/GetCountryList",
                    'dataType': "json"
            }
        }
    });
});

this works fine for the first level. Now I want to get the childs from this URL

"http://localhost:56311/ProductRESTService.svc/GetRegionList/{id}",

I do not know how I can achieve this?

edit: The service GetCountryList generated something like this:

[{"id":"DE","parent":"#","state":"closed","text":"DE"},
{"id":"GBR","parent":"#","state":"closed","text":"GBR"},
{"id":"SE","parent":"#","state":"closed","text":"SE"}]

and GetRegionList

something like this:

[{"id":"SH","parent":"DE","state":"closed","text":"SH"},
{"id":"NRW","parent":"DE","state":"closed","text":"NRW"},
{"id":"LON","parent":"GBR","state":"closed","text":"LON"}]

Upvotes: 2

Views: 5326

Answers (1)

vakata
vakata

Reputation: 3886

Use this:

$(function () {
    $.support.cors = true;
    $('#using_json').jstree({
        "plugins": ["themes", "json_data", "dnd", "wholerow"],
            'core': {
            'data': {
                'url': function (node) {
                    if(node.id === '#') {
                        return "http://localhost:56311/ProductRESTService.svc/GetCountryList";
                    }
                    else {
                        return "http://localhost:56311/ProductRESTService.svc/GetRegionList/" + node.id;
                    }
                },
                'dataType': "json"
            }
        }
    });
});

Upvotes: 3

Related Questions