jQuery EasyUI 树形网格（TreeGrid） – 动态加载（按需加载子节点）
jQuery EasyUI TreeGrid 支持两种常见的“动态加载”方式：
- 服务器端按需加载（On-Demand Loading / Remote Lazy Loading）
最常见场景：首次加载根节点，展开节点时向服务器请求该节点的子节点数据（推荐用于大数据量）。 - 客户端懒加载（Client Lazy Loading）
一次性从服务器获取全部层级数据，但首次只显示根节点，展开时在客户端逐步追加子节点（适用于已知全部数据但想避免一次性渲染过多节点）。
下面分别提供完整示例。
示例1：服务器端按需动态加载（推荐）
TreeGrid 会自动在展开节点时向服务器发送参数 id（父节点ID），服务器根据 id 返回子节点数组。
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 - 服务器端按需加载子节点</h2>
<table id="tg" class="easyui-treegrid" style="width:700px;height:500px"
data-options="
url: 'treegrid_dynamic.php', <!-- 服务器脚本 -->
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name',
lines: true">
<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>
</body>
</html>服务器端示例（treegrid_dynamic.php）
<?php
// 获取父节点ID（首次加载根节点时 id 为 null 或不存在）
$parentId = isset($_GET['id']) ? $_GET['id'] : null;
// 模拟数据（实际从数据库查询）
$data = array();
if ($parentId == null) {
// 根节点
$data[] = array('id'=>1, 'name'=>'Applications', 'size'=>'', 'date'=>'2025-01-01', 'state'=>'closed');
$data[] = array('id'=>2, 'name'=>'Documents', 'size'=>'', 'date'=>'2025-02-01', 'state'=>'closed');
} elseif ($parentId == 1) {
// Applications 的子节点
$data[] = array('id'=>11, 'name'=>'EasyUI', 'size'=>'2MB', 'date'=>'2025-12-01');
$data[] = array('id'=>12, 'name'=>'jQuery', 'size'=>'1MB', 'date'=>'2025-11-01');
} elseif ($parentId == 2) {
// Documents 的子节点
$data[] = array('id'=>21, 'name'=>'Report.pdf', 'size'=>'500KB', 'date'=>'2025-12-10');
}
echo json_encode($data);
?>关键点：
- 有子节点的父节点需设置
"state": "closed"，这样才会显示展开图标。 - 首次请求无
id参数，返回根节点。 - 展开时自动带
id参数请求子节点。
示例2：客户端懒加载（一次性加载全部数据，但逐步渲染）
适用于已获取完整层级数据，但想避免一次性渲染大量节点。
HTML 部分
<table id="tg" class="easyui-treegrid" title="客户端懒加载 TreeGrid"
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) {
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 opts = $(this).treegrid('options');
opts.onBeforeExpand = function(row) {
if (row.children1) {
$(this).treegrid('append', {
parent: row[opts.idField],
data: row.children1
});
row.children1 = undefined;
$(this).treegrid('expand', row[opts.idField]);
}
return row.children1 == undefined; // 已加载则不再触发
};
return data;
}
</script>treegrid_full_data.json（完整层级数据示例，与基础示例相同）
官方参考
- 服务器端动态加载：https://www.jeasyui.com/tutorial/tree/treegrid3.php
- 客户端懒加载：https://www.jeasyui.com/tutorial/tree/treegrid5.php
- Demo 页面：https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid （查看 Dynamic Loading 和 Lazy Loading 示例）
如果需要结合分页、编辑或其他功能，或提供你的后端语言（PHP/Java/Node 等），我可以给出更具体的服务器端代码！
