jQuery EasyUI 数据网格与树插件 – Tree 树（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，用户对界面的交互性和数据展示的效率要求越来越高。jQuery EasyUI 数据网格与树插件 – Tree 树，作为 EasyUI 框架中的核心组件，为开发者提供了高效构建动态交互界面的工具。无论是展示层级化的数据结构，还是实现表格与树形菜单的联动，这两者都能大幅简化开发流程。本文将从基础到进阶，结合实例代码，带读者全面理解如何利用这两个插件提升前端开发效率。

一、EasyUI 框架简介

什么是 EasyUI？

jQuery EasyUI 是一个基于 jQuery 的开源前端框架，专注于构建丰富的用户界面（UI）。它提供了一系列直观的组件，如数据网格（DataGrid）、树形控件（Tree）、日历（Calendar）、窗口（Window）等，支持通过少量代码实现复杂功能。

核心特点

1. 模块化设计：每个组件独立，可根据需求灵活引入。
2. 数据驱动：支持本地数据和远程数据（如通过 AJAX 调用）。
3. 跨浏览器兼容：兼容主流浏览器，确保一致的用户体验。

二、Tree 树插件：层级数据的可视化呈现

树形结构的常见场景

树形控件（Tree）常用于展示具有层级关系的数据，例如：

• 文件系统（文件夹与文件）
• 组织架构（部门与员工）
• 权限管理系统（菜单与子菜单）

基础用法：初始化一个 Tree 树

HTML 结构

<div id="tree" class="easyui-tree"  
     url="/api/tree-data"  
     method="get"  
     animate="true">  
</div>

关键属性说明：

• url：指定数据源的 URL，支持 JSON 格式数据。
• method：定义请求方法（GET/POST）。
• animate：是否启用节点展开/折叠的动画效果。

数据格式示例

[
    {
        "id": 1,
        "text": "根节点",
        "state": "closed",  // 初始状态：open 或 closed
        "children": [
            {
                "id": 2,
                "text": "子节点 1",
                "attributes": {  // 自定义属性
                    "type": "folder"
                }
            },
            {
                "id": 3,
                "text": "子节点 2",
                "state": "open"
            }
        ]
    }
]

树节点的交互操作

事件监听

通过绑定事件，可以实现用户与树节点的交互：

$("#tree").tree({
    onClick: function(node) {
        alert("点击了节点：" + node.text);
    },
    onBeforeExpand: function(node) {
        // 在展开前加载子节点数据
        return $.ajax({
            url: "/api/load-children/" + node.id,
            type: "GET"
        });
    }
});

三、数据网格（DataGrid）：动态表格的构建

数据网格的核心功能

数据网格（DataGrid）用于展示结构化的数据列表，并支持分页、排序、筛选等功能。它常与树插件联动，例如点击树节点时动态加载表格数据。

基础 HTML 结构

<table id="dataGrid" class="easyui-datagrid"  
       url="/api/grid-data"  
       fitColumns="true"  
       pagination="true"  
       rownumbers="true">  
    <thead>  
        <tr>  
            <th field="id" width="80">ID</th>  
            <th field="name" width="150">名称</th>  
            <th field="date" width="120">日期</th>  
        </tr>  
    </thead>  
</table>

关键属性说明

• fitColumns：自动调整列宽以适应容器。
• pagination：启用分页功能。
• rownumbers：显示行号列。

四、Tree 与 DataGrid 的联动：构建动态交互场景

场景示例：权限管理系统

假设我们需要实现一个权限管理系统，左侧为树形菜单（Tree），右侧为选中节点的权限列表（DataGrid）。

实现步骤

1. 初始化 Tree 和 DataGrid：

<!-- 树控件 -->
<div id="menuTree" class="easyui-tree"  
     url="/api/menus"  
     onClick="onTreeNodeClick"></div>

<!-- 数据网格 -->
<table id="permissionGrid" class="easyui-datagrid"  
       url="/api/permissions"  
       queryParams={menuId: 0}></table>

2. 绑定树节点点击事件，更新表格数据：

function onTreeNodeClick(node) {
    // 更新 DataGrid 的查询参数
    $("#permissionGrid").datagrid({
        queryParams: { menuId: node.id },
        // 刷新表格数据
        reload: true
    });
}

3. 后端接口设计

• /api/menus：返回树形菜单的层级数据。
• /api/permissions?menuId={id}：根据菜单 ID 查询对应的权限列表。

动态加载与性能优化

在大型项目中，可以通过 异步加载子节点 和 延迟加载数据 提升性能：

$("#menuTree").tree({
    onBeforeExpand: function(node) {
        return $.ajax({
            url: "/api/load-submenus/" + node.id,
            success: function(data) {
                // 将返回的子节点数据追加到当前节点
                $("#menuTree").tree("append", {
                    data: data,
                    parent: node.target
                });
            }
        });
    }
});

五、进阶技巧：自定义 Tree 和 DataGrid

1. 树节点的自定义图标

通过设置 iconCls 属性，可以为节点添加图标：

{
    "id": 4,
    "text": "文档",
    "iconCls": "icon-document",  // 对应 CSS 类
    "state": "open"
}

配合 CSS 定义图标样式：

.icon-document { background-image: url("/icons/document.png"); }

2. 数据网格的列操作

• 可编辑列：通过 editor 属性实现单元格内编辑。

<th field="name" editor="text">名称</th>

• 操作列：添加按钮实现增删改功能：

<th field="action" width="100" formatter="formatAction">
    操作
</th>

<script>
function formatAction(value, row) {
    return `<a href="#" onclick="editRow(${row.id})">编辑</a> | ` +
           `<a href="#" onclick="deleteRow(${row.id})">删除</a>`;
}
</script>

3. 数据网格的分页配置

$("#dataGrid").datagrid({  
    pagination: true,  
    pageSize: 10,  // 每页显示数量  
    pageList: [10, 20, 30],  // 可选页数  
    onLoadSuccess: function(data) {  
        // 分页完成后触发  
    }  
});

六、常见问题与解决方案

问题 1：树节点无法展开或加载数据

原因：

• 数据格式不符合要求（如缺少 id 或 text 字段）。
• 服务端接口返回错误状态码（如 404）。

解决方案：

1. 使用浏览器开发者工具检查网络请求（Network Tab）。
2. 确保返回的 JSON 数据结构与文档示例一致。

问题 2：DataGrid 列宽不适应内容

解决方案：

• 设置 fitColumns: true 自动调整列宽。
• 手动设置列宽时，确保总和不超过容器宽度。

七、总结与展望

通过结合 jQuery EasyUI 的 Tree 树插件与 DataGrid 数据网格，开发者可以快速构建出功能丰富的动态界面。无论是展示层级化数据，还是实现复杂的数据交互，这两个组件都能提供强大的支持。

对于初学者，建议从基础用法入手，逐步掌握配置项和事件绑定；中级开发者则可深入探索自定义渲染、异步加载等高级功能。随着前端技术的演进，EasyUI 的生态也在持续更新，未来或将支持更多现代化特性，例如与 Vue 或 React 的集成。

通过本文的实例与代码示例，希望读者能够掌握这两个核心组件的使用，并在实际项目中灵活应用，提升开发效率。

（全文约 2200 字）