异常教程

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）是一种常用且直观的界面元素，它能够将复杂的数据层级以树状结构展示。而 异步树形菜单 则通过动态加载数据的方式，解决了传统静态菜单在数据量过大时的性能问题。本文将从基础概念、实现原理到实战案例，逐步讲解如何使用 jQuery EasyUI 框架创建异步树形菜单，帮助读者快速掌握这一技能。无论是编程新手还是中级开发者，都能通过本文找到适合自己的学习路径。

环境准备

在开始之前，请确保已具备以下工具和依赖：

  • 浏览器（如 Chrome 或 Firefox）
  • 代码编辑器（如 VS Code 或 Sublime Text）
  • jQuery 和 EasyUI 库：
    • 下载 EasyUI 的官方包（推荐版本 1.10.0 以上）
    • 或通过 CDN 引入： 
      <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>
  • 简单的服务器环境（如 Node.js 或 PHP）用于模拟异步接口

核心知识点解析

什么是异步树形菜单？

异步树形菜单是指树节点的数据不是一次性加载到页面中，而是通过按需加载的方式逐步获取。例如，当用户展开某个父节点时，才会向服务器请求该节点的子节点数据。这种设计的优势在于：

  1. 减少初始加载时间：避免一次性传输大量数据。
  2. 节省资源：仅加载用户实际需要的节点。
  3. 支持大数据量场景：适用于组织架构、文件系统等层级复杂的场景。

形象比喻：可以将异步树形菜单想象为“分页加载”的树结构，用户每展开一个节点，就相当于翻阅了一页内容。

EasyUI 树形菜单的核心配置

jQuery EasyUI 的 tree 组件是实现异步树形菜单的核心工具。其关键配置参数如下：
| 参数名 | 作用描述 |
|-----------------|--------------------------------------------------------------------------|
| url | 指定异步请求的接口地址，用于获取子节点数据 |
| method | 请求方法（如 GET 或 POST） |
| onLoadSuccess | 数据加载成功后的回调函数，可用于自定义处理 |
| animate | 是否启用折叠/展开的动画效果 |

代码示例：

<div id="asyncTree"></div>
<script>
$(function() {
    $('#asyncTree').tree({
        url: '/api/tree-data',
        method: 'GET',
        animate: true,
        onLoadSuccess: function(node, data) {
            console.log('节点加载成功:', node, data);
        }
    });
});
</script>

异步加载的实现步骤

步骤 1：构建基础 HTML 结构

在 HTML 文件中定义一个容器元素，并引入 EasyUI 的 CSS 和 JS 文件：

<!DOCTYPE html>
<html>
<head>
    <title>异步树形菜单示例</title>
    <!-- 引入 EasyUI 的 CSS 和 JS 文件 -->
    <link rel="stylesheet" href="themes/default/easyui.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.easyui.min.js"></script>
</head>
<body>
    <h2>部门组织结构树</h2>
    <div id="orgTree" style="width: 300px;"></div>
</body>
</html>

步骤 2：定义服务器端接口

异步树形菜单依赖后端接口返回数据。以下是一个简单的 PHP 示例，模拟层级数据：

<?php
// api/tree-data.php
header('Content-Type: application/json');

// 假设当前请求的节点 ID 通过 GET 参数传递
$nodeId = $_GET['id'] ?? '0'; // 根节点默认为 0

// 模拟数据库查询结果
$data = [
    ['id' => '1', 'text' => '技术部', 'state' => 'closed'],
    ['id' => '2', 'text' => '市场部', 'state' => 'closed'],
    ['id' => '3', 'text' => '财务部', 'state' => 'open']
];

if ($nodeId == '1') { // 展开技术部时加载子节点
    $data = [
        ['id' => '1-1', 'text' => '前端组', 'state' => 'open'],
        ['id' => '1-2', 'text' => '后端组']
    ];
}

// 返回 JSON 格式数据
echo json_encode($data);
?>

步骤 3：配置 EasyUI 树形菜单

在 JavaScript 中初始化树形菜单，并关联接口地址：

<script>
$(function() {
    // 初始化异步树
    $('#orgTree').tree({
        url: '/api/tree-data.php', // 接口地址
        method: 'GET',
        onLoadSuccess: function(node, data) {
            // 可在此处理加载完成后的逻辑，例如展开根节点
            if (!node) {
                $('#orgTree').tree('expand', $('#orgTree').tree('getRoot'));
            }
        }
    });
});
</script>

数据格式规范

EasyUI 的树形菜单要求接口返回的数据必须符合以下格式：

[
    {
        "id": "节点唯一标识",
        "text": "节点显示文本",
        "state": "closed" | "open" | "loaded", // 控制节点是否可展开
        "children": [子节点数组] // 可选，当 state 为 "open" 时需要包含子节点
    },
    ...
]

关键点说明：

  • state 为 closed 表示该节点有子节点但未展开，用户点击时会触发异步请求。
  • state 为 open 表示节点已展开，需直接返回子节点数据。
  • state 为 loaded 表示节点无子节点，避免重复请求。

实战案例：实现分层部门树

场景描述

假设我们需要构建一个公司部门树，层级结构如下：

- 公司总部（ID:0）
  ├── 技术部（ID:1）
  │   ├── 前端组（ID:1-1）
  │   └── 后端组（ID:1-2）
  └── 市场部（ID:2）
      └── 运营组（ID:2-1）

实现步骤

  1. 前端代码：
<div id="corpTree" style="width: 300px; height: 400px;"></div>
<script>
$(function() {
    $('#corpTree').tree({
        url: '/api/corp-tree.php',
        method: 'POST',
        onLoadSuccess: function(node, data) {
            if (!node) {
                // 默认展开根节点
                $('#corpTree').tree('expand', $('#corpTree').tree('getRoot'));
            }
        }
    });
});
</script>
  1. 后端接口逻辑（PHP）：
<?php
// api/corp-tree.php
header('Content-Type: application/json');
$id = $_POST['id'] ?? '0';

$nodes = [];
if ($id === '0') { // 根节点
    $nodes = [
        ['id' => '1', 'text' => '技术部', 'state' => 'closed'],
        ['id' => '2', 'text' => '市场部', 'state' => 'closed'],
    ];
} elseif ($id === '1') { // 技术部子节点
    $nodes = [
        ['id' => '1-1', 'text' => '前端组', 'state' => 'open'],
        ['id' => '1-2', 'text' => '后端组']
    ];
} elseif ($id === '2') { // 市场部子节点
    $nodes = [
        ['id' => '2-1', 'text' => '运营组']
    ];
}

// 处理子节点状态（例如前端组已展开）
if ($id === '1-1') {
    $nodes = [['id' => '1-1-1', 'text' => 'UI设计师']];
}

echo json_encode($nodes);
?>

常见问题与解决方案

问题 1：树形菜单加载失败

原因：接口地址错误、返回格式不符合规范、跨域问题。
解决方案：

  • 使用浏览器开发者工具（F12）检查 Network 面板，确认请求是否成功。
  • 确保返回的 JSON 数据严格符合 EasyUI 的格式要求。
  • 若使用不同域名，需在后端配置 CORS 头： 
    header("Access-Control-Allow-Origin: *");

问题 2：节点无法展开

原因：节点的 state 属性未设置为 closed，或子节点数据缺失。
解决方案：

  • 在接口返回的父节点中设置 state: "closed"。
  • 确保展开节点的 id 参数能匹配到对应的子节点数据。

问题 3：性能优化

对于超大数据量的树形结构，可采取以下优化措施：

  1. 懒加载：仅在用户展开节点时加载子节点数据。
  2. 分页加载：当子节点过多时，通过分页接口分批加载。
  3. 缓存策略：将已加载的数据缓存到本地存储，减少重复请求。

结论

通过本文的讲解，读者已经掌握了如何使用 jQuery EasyUI 创建异步树形菜单的核心方法，包括环境搭建、数据格式规范、代码实现及常见问题解决方案。异步树形菜单不仅提升了用户体验，还优化了资源利用率，是构建复杂 Web 应用的必备技能之一。

实践建议：

  1. 尝试将示例代码中的 PHP 接口改为其他语言（如 Node.js 或 Python）。
  2. 实现一个带有搜索功能的树形菜单，通过输入框过滤节点。
  3. 结合 EasyUI 的 treegrid 组件，扩展为支持多列的树形表格。

掌握这一技能后，读者可以将其应用到权限管理系统、文件资源管理器、组织架构管理等实际项目中，进一步提升开发效率。

最新发布

查看更多文章