Lazy loading with jQuery treeTable

Question

I use this plugin to get the tree table: http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/

It works great, except for one thing that I need, which is lazy loading of content.

It provides a callback function when opening a folder, which I then use to retrieve a freshly baked branch and use the ajax call to populate it with data. It works fine in the table, but the added rows do not match the indented structure in which they should.

Call jQuery ('# tree-table'). treeTable ({}); after adding additional lines, it leads to the correct indentation, but also destroys the tree, which annoys the user navigating along a deep path.

Has anyone else tried to do something similar with treeTable?

Answer 1

GitHub has a problem with Lazy Loading, which may help: https://github.com/ludo/jquery-treetable/issues/24

Answer 2

it looks like you want to use either:

expand : Recursively show all node children in a tree. reveal : Reveal a node by expanding all ancestors. 

which they offer in their API. When you add a new branch, make sure that you have saved the link to it, and then, after reinitializing, call the function to display it (perhaps, in this case, we find ()).

Answer 3

 var orgExpandNode = $.fn.jqGrid.expandNode, orgCollapseNode = $.fn.jqGrid.collapseNode; $.jgrid.extend({ expandNode : function(rc) { if(this.getNodeChildren(rc).length===0){ $.ajax({ url : "http://localhost:8080/xxxx", success : function(data) { var result = data; for(var i=0;i<result.length;i++){ grid.addChildNode(result[i].id,result[i].parent,result[i]); } result=[]; } }); } return orgExpandNode.call(this, rc); }, });