jQuery EasyUI tree menu - tree lazy loading grid nodes
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).
Create tree 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.
'LoadFilter' Code
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; }