HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Sometimes we have been fully hierarchical tree grid (TreeGrid) data. We also want the tree grid (TreeGrid) hierarchical lazy loading node. First, load only the top node. Click on the icon and then expand the node to load its child nodes. This tutorial shows you how to create a tree with an inert load Characteristics grid (TreeGrid).
<Table id = "test" title = "Folder Browser" class = "easyui-treegrid" style = "width: 700px; height: 300px" data-options = " url: 'data / treegrid_data.json', method: 'get', rownumbers: true, idField: 'id', treeField: 'name', loadFilter: myLoadFilter "> <Thead> <Tr> <Th field = "name" width = "220"> Name </ th> <Th field = "size" width = "100" align = "right"> Size </ th> <Th field = "date" width = "150"> Modified Date </ th> </ Tr> </ Thead> </ Table>
To place the load child nodes, each node we need to rename the 'children' property. As shown in the following code, 'children' property Rename 'children1'. When you expand a node, we call the 'append' method to load its child nodes data.
function myLoadFilter (data, parentId) { function setData () { var todo = []; for (var i = 0; i <data.length; i ++) { todo.push (data [i]); } while (todo.length) { var node = todo.shift (); if (node.children) { node.state = 'closed'; node.children1 = node.children; node.children = undefined; todo = todo.concat (node.children1); } } } setData (data); var tg = $ (this); var opts = tg.treegrid ( 'options'); opts.onBeforeExpand = function (row) { if (row.children1) { tg.treegrid ( 'append', { parent: row [opts.idField], data: row.children1 }); row.children1 = undefined; tg.treegrid ( 'expand', row [opts.idField]); } return row.children1 == undefined; }; return data; }