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

10,155

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;
            }
        }
    }, ...
Share:
10,155
lance
Author by

lance

Updated on June 05, 2022

Comments

  • lance
    lance about 2 years

    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'}}]";
    }