异常教程

jQuery EasyUI 树形菜单 – 树形网格惰性加载节点（保姆级教程）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，树形菜单（Tree Menu）和树形网格（Tree Grid）是常见的交互组件，它们以层级结构展示数据，帮助用户高效管理复杂信息。然而，当数据量庞大时，一次性加载所有节点可能导致页面性能下降。为了解决这一问题，jQuery EasyUI 树形菜单 – 树形网格惰性加载节点技术应运而生。它通过“按需加载”（Lazy Loading）的方式，仅在用户展开父节点时动态获取子节点数据，显著提升用户体验与系统性能。本文将从基础概念、实现步骤、代码示例及优化技巧等方面，逐步解析这一技术的实现逻辑。

基础概念解析

1. 树形菜单与树形网格

树形菜单是一种以层级结构展示数据的 UI 组件，通常用于导航、目录管理或权限配置。例如，文件管理器中的文件夹结构就是典型的树形结构。而树形网格则在此基础上增加了表格功能，允许在每一行显示多列数据（如“部门名称、负责人、创建时间”等），适用于需要展示复杂信息的场景。

2. 惰性加载（Lazy Loading）

惰性加载是一种延迟加载技术，其核心思想是仅在必要时加载数据。例如，当用户首次访问页面时，树形菜单仅加载根节点；当用户展开某个父节点时，系统才会向服务器请求其子节点数据。这种策略能减少初始加载时间，降低服务器压力，尤其适用于数据量庞大或网络延迟较高的场景。

3. jQuery EasyUI 的角色

jQuery EasyUI 是一个基于 jQuery 的前端 UI 框架，提供了丰富的组件和功能。其树形菜单（Tree）和树形网格（TreeGrid）组件支持惰性加载，开发者仅需通过配置参数即可实现动态加载节点，无需编写复杂逻辑。

核心实现步骤

1. 准备 HTML 结构

首先，在页面中定义一个容器元素用于承载树形结构。例如：

<div id="treeGrid" style="width: 100%; height: 500px;"></div>

此容器将作为树形网格的挂载点。

2. 配置树形网格的属性

使用 jQuery EasyUI 的 treegrid 方法初始化组件，并设置关键参数：

$("#treeGrid").treegrid({
    url: "/api/get-root-nodes", // 初始加载根节点的接口
    method: "GET",
    idField: "id",             // 唯一标识字段名
    treeField: "name",         // 用于显示节点文本的字段
    columns: [[                // 定义表格列
        { field: "name", title: "名称", width: 200 },
        { field: "manager", title: "负责人", width: 150 },
        { field: "created_at", title: "创建时间", width: 150 }
    ]],
    onLoadSuccess: function (node, data) {
        // 节点加载成功后的回调
        console.log("节点加载成功：", node, data);
    }
});

关键参数说明：

  • url: 初始加载根节点的 API 路径。
  • idField: 每个节点的唯一标识字段名，用于关联父子节点。
  • treeField: 显示节点文本的字段名。
  • columns: 定义表格列的配置数组。

3. 实现惰性加载逻辑

默认情况下，树形网格会一次性加载所有子节点。要启用惰性加载，需设置 url 为空，并通过 onBeforeExpand 事件动态请求子节点数据：

$("#treeGrid").treegrid({
    url: null, // 禁用初始加载
    onBeforeExpand: function (node) {
        // 展开节点前触发，动态请求子节点数据
        $(this).treegrid("options").url = "/api/get-children?parentId=" + node.id;
        return true; // 允许展开操作
    },
    onExpand: function (node) {
        $(this).treegrid("reload", node); // 重新加载当前节点的子节点
    }
});

关键点解释：

  • 通过 onBeforeExpand 事件，动态修改 url 参数为当前节点的子节点接口。
  • return true 表示允许展开操作，若返回 false 则阻止展开。
  • onExpand 回调用于强制刷新节点数据。

代码示例与实战演练

案例场景：公司部门结构管理

假设我们需展示一个公司部门树形结构，包含多级子部门，并在展开时动态加载子节点。

1. 服务器端 API 设计

定义两个接口：

  • 根节点接口：/api/get-root-nodes，返回公司顶层部门（如“总部”）。
  • 子节点接口：/api/get-children?parentId=123，根据父节点 ID 加载子部门。

响应示例（JSON）：

[
    {
        "id": 1,
        "name": "总部",
        "manager": "张经理",
        "created_at": "2023-01-01",
        "children": [] // 初始不包含子节点
    },
    {
        "id": 2,
        "name": "技术部",
        "manager": "李总监",
        "created_at": "2023-02-15",
        "children": []
    }
]

当用户展开“技术部”节点时，系统会向 /api/get-children?parentId=2 发起请求，返回其子部门（如“前端组”“后端组”）。

2. 完整前端代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="treeGrid" style="width: 100%; height: 500px;"></div>

    <script>
        $(function() {
            $("#treeGrid").treegrid({
                method: "GET",
                idField: "id",
                treeField: "name",
                url: null,
                columns: [[
                    { field: "name", title: "部门名称", width: 200 },
                    { field: "manager", title: "负责人", width: 150 },
                    { field: "created_at", title: "创建时间", width: 150 }
                ]],
                onBeforeExpand: function (node) {
                    // 动态设置子节点请求地址
                    $(this).treegrid("options").url = "/api/get-children?parentId=" + node.id;
                    return true;
                },
                onLoadSuccess: function (node, data) {
                    console.log("节点加载完成：", node, data);
                }
            });
        });
    </script>
</body>
</html>

进阶技巧与常见问题

1. 优化数据加载性能

  • 缓存机制：通过 localStorage 或 sessionStorage 缓存已加载的节点数据，避免重复请求。
  • 分页加载：当子节点过多时，可在接口中支持分页参数（如 page 和 pageSize），并结合 EasyUI 的分页插件实现。

2. 处理异步加载失败

在 onLoadError 事件中添加错误处理逻辑，例如：

onLoadError: function () {
    alert("加载节点数据失败，请检查网络连接！");
    return false; // 阻止展开操作
}

3. 扩展功能：自定义节点图标

通过 iconCls 字段为不同层级节点添加图标：

// 在节点数据中添加 iconCls 字段
{
    "id": 1,
    "name": "总部",
    "iconCls": "icon-headquarter" // 对应 CSS 类
}

并定义 CSS：

.icon-headquarter { background-image: url('headquarter.png'); }

结论

通过本文的讲解，我们掌握了如何利用 jQuery EasyUI 树形菜单 – 树形网格惰性加载节点 技术构建高效、灵活的树形结构。其核心在于通过动态配置 url 参数与事件监听，实现数据的“按需加载”。无论是管理公司部门、文件系统还是权限配置，这一技术都能显著提升用户体验与系统性能。

对于开发者而言，理解惰性加载的底层逻辑并结合实际场景优化代码，是迈向专业前端开发的重要一步。建议读者通过搭建一个简单的树形网格案例（如示例中的部门管理），亲手实践并调试代码，以加深对技术细节的理解。

最后提醒：在部署生产环境时，请务必对 API 接口进行权限校验和数据过滤，确保敏感信息的安全性。

最新发布

查看更多文章