如何使用新的jstree v3.0.0按需加载子级 [英] How to load children on demand with new jstree v3.0.0
问题描述
我正在寻找一些帮助，以便在jstree中按需(扩展)填充子节点.我可以填充父节点，但是没有运气可以填充子节点.
I am looking for like a little bit of help populating children nodes on-demand (on expand) in a jstree. I can populate the parent nodes but having no luck populating the child nodes.
我正在使用jstree填充树中的节点.我的数据源是json.但是，我从其他服务获得父节点，而从其他服务获得子节点.
I am using jstree for populating nodes in a tree. My data source is json. However, i get parent nodes from a different service and child nodes from a different service.
我正在使用新的jstree版本3.0.0 ，可在以下位置找到: https://github.com/vakata/jstree/zipball/3.0.0- beta8
I am using the new jstree version 3.0.0 found here: https://github.com/vakata/jstree/zipball/3.0.0-beta8
我想在用户扩展父节点时按需加载子项和子项.可能有数百家公司，数千个站点和数百万个代理，因此不可能一次加载所有数据...(即将结果结合在一起，公司，站点和代理可以正常工作，但由于性能问题而并不理想).
I want to load children and sub-children on demand when a user expands a parent node. There could hundreds of companies, thousands of sites and millions of agents and thus it is not possible to load all data at once... (i.e. combining results Companies, sites and agents together works, but is not desirable due to performance issues).
可在此处找到代码示例: http://www.jstree.com/docs/json/非常隐含，我只能使用提供的示例填充父节点.也许遇到过类似解决方案的人可以帮助我找到合适的解决方案.
The code samples found here: http://www.jstree.com/docs/json/ are quite implicit and I could only populate parent nodes using the sample provided. Maybe someone who has faced similar solution can help me find a suitable solution.
另外，我需要加载3层子级，想想一个场景:
Additionally, I need to load 3 layers of children, Think of a scenario:
Company1 -Site1 --Agent1 -代理2 -Site2 -代理3 --Agent4
Company1 -Site1 --Agent1 --Agent2 -Site2 --Agent3 --Agent4
Company2 -Site3 --Agent5 -Site4 --Agent6 --Agent7
Company2 -Site3 --Agent5 -Site4 --Agent6 --Agent7
这是我的代码(仅适用于父节点):
Here is my code (which only works for parent nodes):
$('#agentsTreev2').jstree({
"plugins": ["contextmenu", "dnd", "search", "sort", "state", "types", "unique", "wholerow"],
'core': {
'data': {
'url': function (node) {
console.log(node.id);
return node.id === '#' ?
'http://localhost:21282/data.svc/Companies?$format=application/json;odata=nometadata;'
:
'http://localhost:21282/data.svc/Sites?$select=Site_Id,Name,Company_Id&$filter=Company_Id eq 24&$format=application/json;odata=nometadata;';
//^^^^上面是儿童/站点的示例网址，实际网址应使用父节点公司ID
//^^^^ above is a sample url for children/Sites, actual url should use parent node Company Id
},
'crossDomain': 'true',
'type': 'GET',
'dataType': 'json',
'contentType': 'application/json',
'cache': false,
'success': function (response) {
return response;
},
'dataFilter': function (data, type) {
if (type == "json") {
//Replace Name to title so that dynatree can render Title text
data = data.replace(/Name/g, "title");
//Convert to Json object to allo addition of custom Object
var jsonObj = JSON.parse(data);
//Hack for WCF Service like in all the functions above.
jsonObj = jsonObj.value;
for (var i = 0; i < jsonObj.length; i++) {
//jstree specific values
jsonObj[i]["id"] = jsonObj[i]["Company_Id"];
jsonObj[i]["text"] = jsonObj[i]["title"];
jsonObj[i]["parent"] = '#';
jsonObj[i]["state"] = "closed";
}
data = JSON.stringify(jsonObj);
}
return data;
},
'error': function (node, XMLHttpRequest, textStatus, errorThrown) {
// Called on error, after error icon was created.
alert('Get Company error: ' + textStatus + ' detail: ' + errorThrown);
//return "-1";
}
}
}
});
公司数据(父节点):
{"value":[{"Company_Id":"31","Name":"E-Dev"},{"Company_Id":"35","Name":"ggggggggggggg"},{"Company_Id":"36","Name":"ggggggggggggg"},{"Company_Id":"37","Name":"ghhhhhhhhhhhhhhhhhhhhhhh"},{"Company_Id":"38","Name":"kjjkhkh jkhh kjh khkh hkhk"},{"Company_Id":"39","Name":"iiiiiiiiiiiiiiiiii"},{"Company_Id":"40","Name":"dsfhdskfjh"},{"Company_Id":"41","Name":"dfjshfkjds"},{"Company_Id":"42","Name":"dfjshfkjds"},{"Company_Id":"43","Name":"dfjshfkjds"},{"Company_Id":"44","Name":"dfjshfkjds"},{"Company_Id":"45","Name":"dfjshfkjds"},{"Company_Id":"46","Name":"dfjshfkjds"},{"Company_Id":"47","Name":"dfjshfkjds"},{"Company_Id":"48","Name":"dfjshfkjds"},{"Company_Id":"49","Name":"dfjshfkjds"},{"Company_Id":"50","Name":"dfjshfkjds"},{"Company_Id":"51","Name":"dfjshfkjds"},{"Company_Id":"52","Name":"dfjshfkjds"},{"Company_Id":"53","Name":"dfjshfkjds"},{"Company_Id":"54","Name":"dfjshfkjds"},{"Company_Id":"55","Name":"dzfdfskdfh"},{"Company_Id":"56","Name":"sdfhdsfh"},{"Company_Id":"57","Name":"jfhjdsfhsdhfj"},{"Company_Id":"58","Name":"fdhafksdfkjdsfhsdk"},{"Company_Id":"59","Name":"dfksdfhksdhfkskd"},{"Company_Id":"60","Name":"test"},{"Company_Id":"61","Name":"test"},{"Company_Id":"62","Name":"ErnestDev"},{"Company_Id":"63","Name":"EarnestDev"},{"Company_Id":"64","Name":"Earnestdev"},{"Company_Id":"65","Name":"hsdkfhksdhkfjh"}]}
网站(公司的子公司)数据:
{"value":[{"Site_Id":"31","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"35","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"36","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"38","Company_Id":"24","Name":"Nottingham"}]}
代理商(目前尚不适用)
{"value":[{"Agent_Id":"61","Name":"","Site_Id":"40"},{"Agent_Id":"62","Name":"","Site_Id":"41"},{"Agent_Id":"63","Name":"","Site_Id":"42"},{"Agent_Id":"64","Name":"","Site_Id":"43"},{"Agent_Id":"65","Name":"","Site_Id":"44"},{"Agent_Id":"66","Name":"","Site_Id":"45"},{"Agent_Id":"67","Name":"","Site_Id":"46"},{"Agent_Id":"180","Name":"","Site_Id":"49"},{"Agent_Id":"181","Name":"","Site_Id":"49"},{"Agent_Id":"182","Name":"","Site_Id":"49"},{"Agent_Id":"183","Name":"","Site_Id":"49"},{"Agent_Id":"184","Name":"","Site_Id":"49"}]}
请注意，这仅是示例数据，正在查询的wcf odata服务已启用了CORS .另请注意，我已成功填充父节点.
Please note that this is only sample data and the wcf odata services being queried are CORS enabled. Please also note that i am successfully populating the parent nodes.
另外，请注意，此处发现的任何错字仅是编辑此帖子以保护关键数据的结果.
Also, please note that any typo found here would only be a result of editing this post to protect crucial data.
我仅遇到填充子节点和子节点的子节点的问题.
请帮助.我有点想尝试各种jstree选项..:(
推荐答案
我为父节点(站点)启用了延迟加载，并使用 initAjax 发送辅助ajax调用懒加载那些效果很好的孩子.
I enabled lazy loading for parent (site) nodes and used initAjax to send secondary ajax call for lazy loading the children which worked fine.
这篇关于如何使用新的jstree v3.0.0按需加载子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
