如何使用“jstree”jquery插件将json变量附加为子节点 – 没有ajax
我有一个使用json数据格式的jsTree。 加载根节点集很好。
我的问题是如何将子节点附加到被单击的父节点。
任何帮助,将不胜感激。
谢谢!
$("#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'}}]"; }
请参阅此处的文档: jsTree docu
编辑
这是代码,您需要将URL更改为目的地,尝试一下
HTML:
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 //eg: [{'data':'A1 node','attr':{'id':'A1'}}, {'data':'A2 node','attr':{'id':'A2'}}] return new_data; } } } });
老部分
如果还没有完成,那么这样的东西会填充子节点的已打开节点:
... "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; } } }, ...