news 2026/4/16 13:02:51

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 树形菜单 - 创建复杂树形网格

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}});
更多功能推荐
  • 页脚汇总：添加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

如果需要特定功能（如服务器端实现、拖拽等）的完整代码，或结合其他组件，请提供更多细节！

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/5 15:44:50

智慧农业ELK落地方案：数据驱动精准农业

对于智慧农业领域的ELK&#xff08;Elasticsearch, Logstash, Kibana&#xff09;落地方案&#xff0c;其核心在于构建一个能处理海量、多源、地理空间数据的监测与分析平台。根据研究&#xff0c;ELK不仅可用于日志分析&#xff0c;也特别适合处理物联网传感器数据&#xff0c…

作者头像 李华
网站建设 2026/4/3 23:58:49

Arbess从基础到实践(27) - 集成soular，使用soular用户统一认证登录

Arbess 是一款开源免费的 CI/CD 工具&#xff0c;支持免费私有化部署&#xff0c;轻量、简洁易用。本文将详细介绍如何安装Arbesssoular&#xff0c;实现统一认证登录。 1、soular 安装 1.1 安装 本文以CentOS操作系统为例。 下载&#xff0c;CentOS安装包下载地址&#xf…

作者头像 李华
网站建设 2026/4/16 12:44:02

GMSSL：国密算法SM2、SM3、SM4的高效实现

GMSSL是一个支持国家密码算法&#xff08;国密算法&#xff09;的开源密码工具库。GMSSL提供了与OpenSSL类似的功能&#xff0c;主要包括&#xff1a;国密算法实现&#xff08;SM2/SM3/SM4等&#xff09;&#xff1b;证书管理&#xff08;支持国密标准证书格式&#xff09;&…

作者头像 李华
网站建设 2026/4/16 11:11:41

08_软考_法律法规与标准化

知识产权基础知识 保护期限知识产权人的确定侵权判定其他法律细则标准化基础知识 标准的分类标准的编号

作者头像 李华
网站建设 2026/4/16 0:28:26

AI原生应用：开启视频生成新时代

AI原生应用：开启视频生成新时代 关键词：AI原生应用、视频生成、人工智能、深度学习、生成模型、应用场景、未来趋势 摘要：本文深入探讨AI原生应用如何开启视频生成的新时代。通过介绍相关核心概念，阐述核心算法原理及操作步骤，展示项目实战案例，分析实际应用场景，推荐工…

作者头像 李华
网站建设 2026/4/16 0:32:17

9 个高效降AI率工具，继续教育学生必备！

9 个高效降AI率工具&#xff0c;继续教育学生必备&#xff01; AI降重工具&#xff1a;高效降低AIGC率&#xff0c;让论文更自然 在当前学术写作中&#xff0c;随着AI技术的广泛应用&#xff0c;越来越多的学生和研究人员发现&#xff0c;使用AI生成的内容容易被查重系统识别为…

作者头像 李华