How to lazy load tree children from ajax

[glarsen]

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":[]}]}]

[stworthy]

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

[glarsen]

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

[stworthy]

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);

[glarsen]

Thanks! 

[glarsen]

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

[stworthy]

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.

[glarsen]

Thanks again!