CODEWITHSUNDEEP
javascriptjquerypluginsjstree
lance
lance

Reputation: 83

how to append json variable as child nodes using "jstree" jquery plugin - no ajax

I have a jsTree using the json data format. Loading the root nodeset is fine.

My problem is how to append child nodes to the parent node that was clicked.

ANY help would be appreciated.

Thanks!

    $("#tree-cat1")
    .bind("open_node.jstree", function (event, data) {
        console.log(data.rslt.obj.attr("id"));
        //eval(loadChild());
        //at this point i need to append the result of loadChild() to the tree under the relevant node
    })
    .jstree({
        "json_data": {
            "data": eval(loadRoot())
        },
        "themes": {"theme": "classic","dots": true,"icons": true},
        "plugins": ["themes", "json_data", "ui"]
    })

function loadRoot() {
    return "[{'data':'A node','state':'closed','attr':{'id':'A'}}]";
}
function loadChild() {
    return "[{'data':'A1 node','attr':{'id':'A1'}}]";
}

Upvotes: 3

Views: 10588

Answers (1)

Irishka
Irishka

Reputation: 1136

see documentation here: jsTree docu

EDIT

here is the code, you need to change url to your destination, try it

html: 

<div id="tree-cat1"></div>

js: 

 $("#tree-cat1").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "themes": {"theme": "classic","dots": true,"icons": true},
    "json_data": {
          //root elements
        "data": [{"data":'A node',"state":'closed',"attr":{"id":'A'}}], 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) { 
                var nodeId = node.attr('id'); //id="A"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'A1 node','attr':{'id':'A1'}}, {'data':'A2 node','attr':{'id':'A2'}}]
                return new_data;
            }
        }
    }
});

OLD PART
something like that will populate opened node with children, if not already done:

 ...
    "json_data": {
          //root elements
        "data": [{"data":'A node',"state":'closed',"attr":{"id":'group_A'}}], 
        "ajax": {
            "type": 'POST',
            "data": {"action": act.GET_GROUPREPORTS},
            "url": function (node) { 
                var nid = node.attr('id'); //id="group_A"
                nid = nid.substr(nid.lastIndexOf('_')+1);

                return module.getDBdata_path + nid;
            },
            "success": function (data) {
                var rid, new_data = data;

                if (typeof data[0] === 'undefined') {
                    new_data = [];
                    for (rid in data) {
                        if(data.hasOwnProperty(rid)) {
                          new_data.push({"data": data[rid], 
                               "attr": {"id": 'rprefix_'+rid, 
                                        "title": ' ', 
                                        "rel": 'report',
                                        "href": module.repView_path+rid
                              }
                          });
                        }
                    }
                }
                return new_data;
            }
        }
    }, ...

Upvotes: 2

Related Questions