我试图得到一个jsTree工作与按需加载子节点。我的代码是这样:
jQuery('#introspection_tree').jstree({ "json_data" : { "ajax" : { url : "http://localhost/introspection/introspection/product" } },"plugins" : [ "themes","json_data","ui" ] });
从调用返回的json是
[ { "data": "Kit 1","attr": { "id": "1" },"children": [ [ { "data": "Hardware","attr": { "id": "2" },"children": [ ] } ],[ { "data": "Software","attr": { "id": "3" },"children": [ ] } ] ] } ..... ]
每个元素可能有很多孩子,树会是大的。目前,这是一次加载整个树,这可能需要一些时间。当用户打开子节点时,我需要做什么来实现按需加载?
提前致谢。
爱尔兰人指出我的方向是正确的,但不能完全解决我的问题。我用她的答案挑出来,想出了这个。为了清楚起见,仅使用两个不同的服务器功能。第一个列出所有顶级产品,第二个列出给定productid的所有子项:
jQuery("#introspection_tree").jstree({ "plugins" : ["themes","ui"],"json_data" : { "ajax" : { "type": 'GET',"url": function (node) { var nodeId = ""; var url = "" if (node == -1) { url = "http://localhost/introspection/introspection/product/"; } else { nodeId = node.attr('id'); url = "http://localhost/introspection/introspection/children/" + nodeId; } return url; },"success": function (new_data) { return new_data; } } } });
从函数返回的json数据是这样的(注意每个节点中的state = closed):
[ { "data": "Kit 1","state": "closed" },{ "data": "KPCM 049","attr": { "id": "4" },{ "data": "Linux BSP","attr": { "id": "8" },"state": "closed" } ]
不需要静态数据,树现在在每个级别上是完全动态的。