Reputation: 907
I am new to Fancytree plugin of Jquery.
I want to lazy load nodes of tree.
I am unable to load these nodes from different sources.
Both the nodes are getting data from same single source. I want node "Lazy Folder1" should load data from sample1.json and node "Lazy Folder2" should load data from sample2.json
$(function(){
var sampleSource = [
{ title: "Lazy Folder1", lazy: true },
{ title: "Lazy Folder2", lazy: true }
];
$("#tree").fancytree({
source: sampleSource,
lazyLoad: function(event, data) {
data.result = { url: "sample1.json" };
}
});
});
Following is link to plunker:-
http://plnkr.co/edit/ZLdgkKUIpg3hinpoYZQK?p=preview
Upvotes: 2
Views: 3028
Reputation: 907
Plunker link for solution http://plnkr.co/edit/ZLdgkKUIpg3hinpoYZQK?p=preview
$(function(){
var sampleSource = [
{ title: "Lazy Folder1", lazy: true, key: 1 },
{ title: "Lazy Folder2", lazy: true, key: 2 }
];
$("#tree").fancytree({
source: sampleSource,
lazyLoad: function(event, data) {
var node = data.node;
data.result = {
url: "sample" + node.key.toString() + ".json",
data: { mode: "children", parent: node.key },
cache: false
};
}
});
});
It will help others...
Upvotes: 2
Reputation: 14824
Typically you would pass the key of the lazy node to your web service, so it can deliver the specific child nodes. For example
lazyLoad: function(event, data){
var node = data.node;
// Load child nodes via ajax GET /getTreeData?mode=children&parent=1234
data.result = {
url: "/getTreeData",
data: {mode: "children", parent: node.key},
cache: false
};
},
See the docs for details.
Upvotes: 1