JQuery FancyTree multiple lazy loading of nodes

Question

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

score 2 · Answer 1 · answered May 16 '17 at 14:20

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...

score 1 · Accepted Answer · answered May 11 '17 at 16:38

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.

JQuery FancyTree multiple lazy loading of nodes

2 Answers2