当前位置：首页 > news >正文

jQuery EasyUI 树形菜单 - 创建复杂树形网格

news 2026/6/27 21:43:23

jQuery EasyUI 树形网格（TreeGrid） - 创建复杂树形网格

jQuery EasyUI 的 TreeGrid 支持许多高级功能，使其成为显示复杂层级数据的强大工具。复杂 TreeGrid 通常包括以下特性：

多列显示复杂数据（如任务名称、人员、日期、进度等）
级联复选框（Cascade Checkbox）
可编辑行（Editable）
右键上下文菜单（Context Menu）
动态加载或按需懒加载子节点（On-Demand Loading）
页脚汇总（Footer）
拖拽排序（需扩展）

下面提供几个典型复杂示例，基于官方 Demo 和教程。

示例1：复杂多列 TreeGrid（带进度条、formatter）

这是一个典型的复杂 TreeGrid，用于显示项目任务列表，支持多列、进度条格式化。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>复杂 TreeGrid 示例</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>复杂 TreeGrid - 项目任务管理</h2><tableid="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><thfield="name"width="300">任务名称</th><thfield="persons"width="80"align="center">人员</th><thfield="begin"width="100"align="center">开始日期</th><thfield="end"width="100"align="center">结束日期</th><thfield="progress"width="150"align="center"formatter="formatProgress">进度</th></tr></thead></table><scripttype="text/javascript">functionformatProgress(value){if(value){vars='<div style="width:100%;border:1px solid #ccc">'+'<div style="width:'+value+';background:#cc0000;color:#fff">'+value+'</div>';returns;}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）。

<tableid="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><thfield="ck"checkbox="true"></th><thfield="name"width="250">名称</th><thfield="size"width="100">大小</th><thfield="date"width="150">日期</th></tr></thead></table><divid="mm"class="easyui-menu"style="width:120px;"><divonclick="append()"iconCls="icon-add">追加</div><divonclick="removeIt()"iconCls="icon-remove">删除</div><divclass="menu-sep"></div><divonclick="expand()"iconCls="icon-reload">展开</div><divonclick="collapse()"iconCls="icon-cancel">折叠</div></div><script>functiononContextMenu(e,row){e.preventDefault();$(this).treegrid('select',row.id);$('#mm').menu('show',{left:e.pageX,top:e.pageY});}functionappend(){/* 实现追加逻辑 */}functionremoveIt(){/* 实现删除逻辑 */}functionexpand(){$('#tg').treegrid('expand',$('#tg').treegrid('getSelected').id);}functioncollapse(){$('#tg').treegrid('collapse',$('#tg').treegrid('getSelected').id);}</script>

示例3：可编辑 TreeGrid（Editable）

支持行编辑、添加、删除。

<tableid="tg"class="easyui-treegrid"style="width:700px;height:400px"><!-- 类似以上，添加 toolbar --><thead><tr><thfield="name"width="200"editor="text">名称</th><thfield="progress"width="120"editor="{type:'numberbox',options:{precision:1}}">进度</th></tr></thead></table><divid="toolbar"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-edit"onclick="edit()">编辑</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-save"onclick="save()">保存</a><ahref="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}});