异常教程
jQuery EasyUI 树形菜单 – 创建基础树形网格（一文讲透）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
- 《从零手撸：仿小红书（微服务架构）》 已完结，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观
前言
在现代 Web 开发中，树形结构和表格（Grid）是展示层级数据的两种常见方式。然而，当数据同时具备层级关系和多列信息时，如何高效整合两者？jQuery EasyUI 树形菜单 – 创建基础树形网格（TreeGrid）提供了一个优雅的解决方案。本文将从零开始，通过代码示例和分步讲解，带领读者掌握 TreeGrid 的核心概念、配置方法及实际应用场景，帮助编程初学者和中级开发者快速构建功能强大的交互式数据展示界面。
核心概念解析：从树形菜单到树形网格
1. 树形结构的底层逻辑
树形结构（Tree）是一种典型的非线性数据结构，由节点（Node）和边（Edge）组成，每个节点可以拥有多个子节点。例如，文件系统的目录层级、组织架构的部门与员工关系，均可以用树形结构表示。
比喻：想象一棵真实的树，主干是根节点，每根枝条是子节点，叶子是终端节点。树形结构的优势在于直观展示层级关系，但单独使用时缺乏对节点属性的多维度描述。
2. 网格的扩展性需求
表格（Grid）通过行列形式展示数据，适合呈现多列信息（如姓名、年龄、部门）。但传统表格无法表达数据的层级关系。例如，展示公司员工信息时，若需同时显示部门与子部门的员工列表，单层表格就显得力不从心。
3. 树形网格的融合价值
树形网格（TreeGrid） 结合了树形结构的层级特性和表格的列展示能力。它允许每个节点在展开时显示子节点，同时为每个节点附加多列属性。例如，在组织架构中，每个部门节点可以展示名称、负责人、员工数量等信息，子节点则显示下级部门或具体员工。
环境准备与依赖配置
1. 安装 jQuery EasyUI
jQuery EasyUI 是一个基于 jQuery 的 UI 框架，提供丰富的组件，包括 TreeGrid。可通过以下方式引入：
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 EasyUI 核心文件 -->
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
2. HTML 结构搭建
创建一个基础 HTML 框架，包含用于承载 TreeGrid 的容器：
<div class="easyui-panel" title="部门与员工信息" style="width:100%;height:400px;padding:10px;">
<table id="treegrid" class="easyui-treegrid"></table>
</div>
基础配置步骤与代码实现
1. 定义数据格式
TreeGrid 的数据需以 JSON 格式提供，每个节点包含 id、text（节点显示文本）、children（子节点列表），以及自定义列的属性（如 manager、count）。
{
"id": 1,
"text": "技术部",
"manager": "张经理",
"count": 30,
"children": [
{
"id": 2,
"text": "前端组",
"manager": "李组长",
"count": 10
},
{
"id": 3,
"text": "后端组",
"manager": "王组长",
"count": 15
}
]
}
2. 初始化 TreeGrid
通过 JavaScript 配置列（columns）、数据源（data 或 url）、节点展开/折叠事件等：
$(function() {
$('#treegrid').treegrid({
// 列定义
columns: [[
{ field: 'text', title: '部门名称', width: 150 },
{ field: 'manager', title: '负责人', width: 100 },
{ field: 'count', title: '人数', width: 80 },
{ field: 'operate', title: '操作', width: 100,
formatter: function(value,row) {
return '<a href="#">编辑</a>';
}
}
]],
// 数据源
data: treeData, // 假设 treeData 是上述 JSON 数据
// 展开所有根节点
onLoadSuccess: function() {
$('#treegrid').treegrid('expandAll');
}
});
});
3. 关键参数解释
- columns：定义表格列，支持嵌套数组（多级表头）和自定义格式化函数（如
formatter）。 - data：本地数据直接赋值；若需动态加载，可通过
url指定接口地址。 - loadSuccess：数据加载完成后触发的回调函数，可用于自动展开节点或执行其他逻辑。
进阶功能：动态数据加载与交互增强
1. 异步加载数据
通过 url 参数和服务器端接口实现分层数据加载，避免一次性传输大量数据：
$('#treegrid').treegrid({
url: '/api/departments', // 接口地址
queryParameters: { level: 1 }, // 传递查询参数
onBeforeLoad: function(node, param) {
// 传递父节点ID到接口
param.parentId = node.id || 0;
}
});
2. 自定义事件与操作
通过绑定事件（如 onDblClickRow）增强交互：
$('#treegrid').treegrid({
onDblClickRow: function(row) {
alert('双击了节点：' + row.text);
}
});
3. 样式与权限控制
通过 styler 函数动态设置行样式，或根据角色隐藏/显示列：
{
field: 'count',
styler: function(value) {
return value > 20 ? 'background-color:#f0f0f0' : '';
}
}
实战案例：构建部门管理 TreeGrid
1. 项目需求
假设需要展示公司部门结构，每个部门节点需显示：
- 部门名称
- 负责人
- 员工人数
- 子部门或员工列表
2. 完整代码示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery EasyUI 树形网格案例</title>
<!-- 引入 EasyUI 文件（略） -->
</head>
<body>
<div class="easyui-panel" title="部门结构" style="width:800px;height:auto;">
<table id="orgTreeGrid"></table>
</div>
<script>
// 模拟数据
var orgData = {
id: 1,
text: "总公司",
manager: "CEO",
count: 100,
children: [
// 技术部数据（如前文 JSON）
]
};
$(function() {
$('#orgTreeGrid').treegrid({
data: orgData,
columns: [[
{ field: 'text', title: '部门', width: 200 },
{ field: 'manager', title: '负责人', width: 150 },
{ field: 'count', title: '人数', align: 'right', width: 80 },
{ field: 'operate', title: '操作',
formatter: function() {
return '<button onclick="editNode()">编辑</button>';
}
}
]],
// 自定义节点展开时加载子数据（可选）
onLoadSuccess: function() {
// ...
}
});
});
// 模拟编辑操作
function editNode() {
alert("进入编辑模式");
}
</script>
</body>
</html>
3. 效果说明
- 用户可点击箭头展开/折叠部门层级。
- 每个节点显示负责人和员工数量，操作列提供编辑按钮。
- 通过修改
orgData或接口逻辑，可轻松适配真实业务场景。
常见问题与解决方案
1. 数据未渲染问题
原因：数据格式不符合要求（如缺少 id 字段）。
解决：检查 JSON 数据是否包含 id、text，子节点是否放在 children 数组中。
2. 树形结构层级显示异常
原因：未正确设置父节点的 parentId 或 id 唯一性不足。
解决：确保每个节点的 id 唯一，并通过 parentField 参数指定父节点标识字段。
3. 列宽不适应内容
原因：列定义中的 width 值过小，或未设置 fitColumns。
解决：添加 fitColumns: true 自动调整列宽，或手动调整 width。
结论
通过本文的分步讲解和实战案例，读者已掌握了 jQuery EasyUI 树形菜单 – 创建基础树形网格 的核心方法。从基础配置到动态数据加载，再到交互增强，TreeGrid 的灵活性和扩展性使其成为复杂层级数据展示的首选工具。建议读者在实际项目中逐步尝试以下进阶功能：
- 结合表单实现节点增删改
- 集成搜索和过滤功能
- 与后端 REST API 深度集成
掌握 TreeGrid 的同时，也鼓励读者探索 EasyUI 的其他组件（如 DataGrid、TreeMenu），进一步提升 Web 开发效率。记住，实践是掌握技术的最佳途径——动手编写代码，让抽象概念转化为具体的交互效果！