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

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

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

点击查看示例

创建树网格

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<tableid="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>

<thfield="name"width="220">Name</th>

<thfield="size"width="100"align="right">Size</th>

<thfield="date"width="150">Modified Date</th>

</tr>

</thead>

</table>

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

'loadFilter'代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

functionmyLoadFilter(data,parentId){

functionsetData(data){

vartodo = [];

for(vari=0; i<data.length; i++){

todo.push(data[i]);

}

while(todo.length){

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

vartg = $(this);

varopts = 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]);

}

returnrow.children1 == undefined;

};

returndata;

}

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

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