问题
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.
Scenario:
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.
I am using the new jstree version 3.0.0 found here: https://github.com/vakata/jstree/zipball/3.0.0-beta8
What challenge I am facing?:
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).
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.
Required:
Additionally, I need to load 3 layers of children, Think of a scenario:
Sample Scenario:
Company1 -Site1 --Agent1 --Agent2 -Site2 --Agent3 --Agent4
Company2 -Site3 --Agent5 -Site4 --Agent6 --Agent7
Code:
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;';
//^^^^ 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";
}
}
}
});
Companies data (parent Nodes):
{"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"}]}
Sites (children of companies) data:
{"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"}]}
Agents (not applicable at this point though)
{"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"}]}
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.
I am only facing issue with populating children nodes and children of children nodes.
Kindly help. I am kind of stuck trying all kinds of jstree options.. :(
Edit:
Parent Nodes that I get:
回答1:
try following
$('#agentsTreev2').on('check_node.jstree', function (e, data) {
data.instance.load_node(data.node);
});
which will call ajax if properly configured
回答2:
I enabled lazy loading for parent (site) nodes and used initAjax to send secondary ajax call for lazy loading the children which worked fine.
来源：https://stackoverflow.com/questions/21928498/how-to-load-children-on-demand-with-new-jstree-v3-0-0