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的教程>>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。