jQuery EasyUI 树形网格（TreeGrid） – 惰性加载节点（客户端懒加载）
“惰性加载节点”（Lazy Loading）在 jQuery EasyUI TreeGrid 中特指客户端懒加载：一次性从服务器获取完整的层级数据，但首次只渲染顶级根节点。用户点击展开图标时，才逐步在客户端追加子节点。
这与之前介绍的服务器端动态加载（Dynamic Loading / On-Demand Loading）不同：
- 服务器端：展开时向服务器请求子节点（适合大数据量，避免一次性加载全部）。
- 客户端惰性加载：全部数据已在前台，逐步渲染（适合数据量中等，避免一次性渲染过多节点导致卡顿）。
完整示例：客户端惰性加载节点
HTML 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TreeGrid 客户端惰性加载节点</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>TreeGrid - 客户端惰性加载（Lazy Loading）</h2>
<table id="tg" class="easyui-treegrid" title="文件夹浏览器"
style="width:700px;height:500px"
data-options="
url: 'treegrid_full_data.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name',
lines: true,
loadFilter: myLoadFilter">
<thead>
<tr>
<th field="name" width="300">名称</th>
<th field="size" width="100" align="right">大小</th>
<th field="date" width="150">修改日期</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function myLoadFilter(data, parentId) {
// 遍历所有节点，将 children 重命名为 children1，并设置 state: 'closed'
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; // 清空 children，避免立即加载
todo = todo.concat(node.children1);
}
}
}
setData(data);
// 重写 onBeforeExpand 事件：展开时追加子节点
var opts = $(this).treegrid('options');
opts.onBeforeExpand = function(row) {
if (row.children1) {
$(this).treegrid('append', {
parent: row[opts.idField], // 父节点 ID
data: row.children1 // 追加子节点数据
});
row.children1 = undefined; // 清空临时数据，避免重复加载
$(this).treegrid('expand', row[opts.idField]); // 保持展开状态
}
return row.children1 == undefined; // 已加载则不再触发
};
return data; // 返回处理后的根节点数据
}
</script>
</body>
</html>treegrid_full_data.json（完整层级数据示例）
[
{
"id": 1,
"name": "Applications",
"size": "",
"date": "2025-01-01",
"children": [
{"id": 11, "name": "EasyUI", "size": "2MB", "date": "2025-12-01"},
{"id": 12, "name": "jQuery", "size": "1MB", "date": "2025-11-01",
"children": [
{"id": 121, "name": "Plugin1", "size": "500KB", "date": "2025-11-01"}
]
}
]
},
{
"id": 2,
"name": "Documents",
"size": "",
"date": "2025-02-01",
"children": [
{"id": 21, "name": "Report.pdf", "size": "500KB", "date": "2025-12-10"}
]
}
]关键说明
- loadFilter：处理完整数据，重命名
children为children1，并设置state: 'closed'以显示展开图标。 - onBeforeExpand：用户点击展开时，使用
append方法追加子节点。 - 优点：避免一次性渲染大量节点，提高初始加载速度。
- 缺点：所有数据仍需一次性从服务器传输（不适合超大数据）。
官方参考
- 教程：https://www.jeasyui.com/tutorial/tree/treegrid5.php
- Demo：https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid （搜索 “Lazy Loading”）
如果需要结合分页、复选框或其他功能，或服务器端版本的对比示例，请提供更多要求！
