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

回答1:

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;
            }
        }
    }, ...

来源：https://stackoverflow.com/questions/7914365/how-to-append-json-variable-as-child-nodes-using-jstree-jquery-plugin-no-aja

标签

javascript

jquery

plugins

jstree