Print Page - How to lazy load tree children from ajax

Title: How to lazy load tree children from ajax
Post by: glarsen on May 12, 2014, 06:17:37 PM

Hi. Using the Tree control and attempting to lazy load with ajax with the onBeforeExpand event.

I can see the data in Firebug in the success callback, a JSON array with node data, but nothing gets loaded to the control. New to this so I’m guessing a syntax error? Thanks for any help.

$('#security-tree').tree({
url: 'load-security-tree?n_tab_id=' + $.urlParam('n_tab_id'),
onBeforeExpand: function (node) {
$.ajax({
type: 'POST',
url: 'load-security-node?n_tab_id=' + $.urlParam('n_tab_id') + '&sec_node_id=' + node.id,
dataType: 'json',
success: function (data) {
//Update the tree
$(this).tree('append', {
parent: node.target,
data: data
});
},
error: function () {
return false;
}
});
}
});

Here's the data I'm trying to load:

[{"checked":false,"properties":{},"children":[]},{"id":"xZGVmYXVsdDpmOmF1dGhpZD00MjIxMTM1Mjk1","text":"Users","state":"closed","checked":false,"iconCls":"icon_namespaceFolder","properties":{"parentID":"xZGVmYXVsdA__","searchPath":"CAMID(\"default:f:authid\u003d4221135295\")","type":"namespaceFolder"},"children":[{"checked":false,"properties":{},"children":[]}]},{"id":"xZGVmYXVsdDpyOmF1dGhpZD0yMzA4NTMyNjcx","text":"Root User Class","state":"closed","checked":false,"iconCls":"icon_role","properties":{"parentID":"xZGVmYXVsdA__","searchPath":"CAMID(\"default:r:authid\u003d2308532671\")","type":"role"},"children":[{"checked":false,"properties":{},"children":[]}]}]

Title: Re: How to lazy load tree children from ajax
Post by: stworthy on May 12, 2014, 11:43:00 PM

Please refer to this tutorial http://www.jeasyui.com/tutorial/tree/tree2.php

Title: Re: How to lazy load tree children from ajax
Post by: glarsen on May 13, 2014, 07:30:48 AM

Thanks for your advice. Using the url property the lazy load is working, but need more advice.

I was hoping to maintain state information so when navigating back to the page the expanded tree could be restored. The url property seemed to be working for that. That's why I was attempting to manually populate node children with the onExpand event.

Is it possible to code for both features - a lazy load and a restore of a saved state?

Thanks,
Gary

Title: Re: How to lazy load tree children from ajax
Post by: stworthy on May 13, 2014, 08:09:27 AM

A possible solution to save the tree state is to get all the tree data and serialize it. To restore the tree state, simply call 'loadData' method and pass the saved tree data as the parameter. The extended method below shows how to get all the tree data.

Code:

$.extend($.fn.tree.methods,{
       getAllData: function(jq){
              var data = [];
              var roots = jq.tree('getRoots');
              for(var i=0; i<roots.length; i++){
                     data.push(jq.tree('getData', roots[i].target))
              }
              return data;
       }
})

Call 'getAllData' method to get the current state data.

Code:

var data = $('#tt').tree('getAllData');

You need to store this data to somewhere or serialize it to the server.

To restore the tree state, get the 'data' and call 'loadData' method.

Code:

$('#tt').tree('loadData', data);

Title: Re: How to lazy load tree children from ajax
Post by: glarsen on May 13, 2014, 09:20:57 AM

Thanks!

Title: Re: How to lazy load tree children from ajax
Post by: glarsen on May 13, 2014, 01:41:16 PM

Fine tuning mode:

Is there a node property which defines it as a leaf node and should not have the expand option? Tried adding a "isLeaf":true as a property but it had no effect.

Gary

Title: Re: How to lazy load tree children from ajax
Post by: stworthy on May 13, 2014, 03:15:20 PM

A tree leaf has at least text property and no children property. The state property must be 'open'. If the state is set to 'closed', it will become a non-leaf node.

Title: Re: How to lazy load tree children from ajax
Post by: glarsen on May 14, 2014, 08:52:40 AM

Thanks again!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: glarsen on May 12, 2014, 06:17:37 PM