jQuery EasyUI 树形网格（TreeGrid） – 创建复杂树形网格
jQuery EasyUI 的 TreeGrid 支持许多高级功能，使其成为显示复杂层级数据的强大工具。复杂 TreeGrid 通常包括以下特性：
- 多列显示复杂数据（如任务名称、人员、日期、进度等）
- 级联复选框（Cascade Checkbox）
- 可编辑行（Editable）
- 右键上下文菜单（Context Menu）
- 动态加载或按需懒加载子节点（On-Demand Loading）
- 页脚汇总（Footer）
- 拖拽排序（需扩展）
下面提供几个典型复杂示例，基于官方 Demo 和教程。
示例1：复杂多列 TreeGrid（带进度条、formatter）
这是一个典型的复杂 TreeGrid，用于显示项目任务列表，支持多列、进度条格式化。
<!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:800px;height:500px"
data-options="
url: 'treegrid_complex_data.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name',
lines: true,
animate: true">
<thead>
<tr>
<th field="name" width="300">任务名称</th>
<th field="persons" width="80" align="center">人员</th>
<th field="begin" width="100" align="center">开始日期</th>
<th field="end" width="100" align="center">结束日期</th>
<th field="progress" width="150" align="center" formatter="formatProgress">进度</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function formatProgress(value) {
if (value) {
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + ';background:#cc0000;color:#fff">' + value + '</div>';
return s;
} else {
return '';
}
}
</script>
</body>
</html>treegrid_complex_data.json 示例：
[{
"id": 1,
"name": "项目A",
"persons": 5,
"begin": "2025-01-01",
"end": "2025-06-01",
"progress": "60%",
"children": [{
"id": 11,
"name": "模块1",
"persons": 2,
"begin": "2025-01-01",
"end": "2025-03-01",
"progress": "100%"
}, {
"id": 12,
"name": "模块2",
"persons": 3,
"begin": "2025-03-01",
"end": "2025-06-01",
"progress": "30%"
}]
}]示例2：带级联复选框和右键上下文菜单的 TreeGrid
添加复选框（cascadeCheck）、右键菜单（append/remove/expand/collapse）。
<table id="tg" class="easyui-treegrid" title="带上下文菜单的 TreeGrid"
style="width:700px;height:400px"
data-options="
url: 'treegrid_data.json',
idField: 'id',
treeField: 'name',
lines: true,
rownumbers: true,
cascadeCheck: true,
onContextMenu: onContextMenu">
<thead>
<tr>
<th field="ck" checkbox="true"></th>
<th field="name" width="250">名称</th>
<th field="size" width="100">大小</th>
<th field="date" width="150">日期</th>
</tr>
</thead>
</table>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" iconCls="icon-add">追加</div>
<div onclick="removeIt()" iconCls="icon-remove">删除</div>
<div class="menu-sep"></div>
<div onclick="expand()" iconCls="icon-reload">展开</div>
<div onclick="collapse()" iconCls="icon-cancel">折叠</div>
</div>
<script>
function onContextMenu(e, row) {
e.preventDefault();
$(this).treegrid('select', row.id);
$('#mm').menu('show', { left: e.pageX, top: e.pageY });
}
function append() { /* 实现追加逻辑 */ }
function removeIt() { /* 实现删除逻辑 */ }
function expand() { $('#tg').treegrid('expand', $('#tg').treegrid('getSelected').id); }
function collapse() { $('#tg').treegrid('collapse', $('#tg').treegrid('getSelected').id); }
</script>示例3：可编辑 TreeGrid（Editable）
支持行编辑、添加、删除。
<table id="tg" class="easyui-treegrid" style="width:700px;height:400px">
<!-- 类似以上，添加 toolbar -->
<thead>
<tr>
<th field="name" width="200" editor="text">名称</th>
<th field="progress" width="120" editor="{type:'numberbox',options:{precision:1}}">进度</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="edit()">编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" onclick="save()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel()">取消</a>
</div>（完整编辑逻辑参考官方 Editable TreeGrid Demo）
示例4：按需懒加载子节点（Lazy Loading）
先加载顶级节点，展开时动态追加子节点。
使用 loadFilter 处理数据。
$('#tg').treegrid({
url: 'full_tree_data.json',
loadFilter: function(data) {
// 重命名 children 为 children1，并设置 state: 'closed'
// 在 onBeforeExpand 中 append 子节点
// 详见官方教程：https://www.jeasyui.com/tutorial/tree/treegrid5.php
}
});更多功能推荐
- 页脚汇总：添加
showFooter: true，在数据中添加 footer 行。 - 动态加载：服务器返回子节点时传入 parent id 参数。
- 拖拽排序：需使用扩展插件（treegrid_dnd）。
官方 Demo 列表（强烈推荐查看）：
- Basic TreeGrid
- Cascade CheckBox
- TreeGrid ContextMenu
- Editable TreeGrid
- TreeGrid with Footer
- Dynamic Loading / Lazy Loading
访问：https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid
如果需要特定功能（如服务器端实现、拖拽等）的完整代码，或结合其他组件，请提供更多细节！
