jQuery EasyUI使用教程之在树网格中延迟加载节点

时间 2019-11-11

标签 jquery easyui 使用教程之在网格延迟加载节点栏目 JQuery 繁體版

原文原文链接

有时咱们已经获得充分的分层树形网格的数据，咱们还想让树形网格按层次延迟加载节点。首先，只加载顶层节点；而后点击节点的展开图标来加载它的子节点。本教程展现如何建立带有延迟加载特性的树形网格。html

jQuery EasyUI最新试用版下载请猛戳>>node

点击查看示例json

建立树网格

1app

2ui

3this

4url

5spa

6code

7htm

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

为了放置加载子节点，咱们须要为每一个节点重命名'children'属性。正以下面的代码所示，'children'属性重命名为'children1'。当展开一个节点时，咱们调用'append'方法来加载它的子节点数据。

'loadFilter'代码

function myLoadFilter(data,parentId){

function setData(data){

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.children.length){

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;

}

下载EasyUI示例：easyui-treegrid-demo.zip

有兴趣的朋友能够点击查看更多有关jQuery EasyUI的教程>>