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 作为一款功能强大的开源 JavaScript 框架，提供了简单易用的树形菜单组件，让开发者无需从零构建复杂的交互逻辑。

本文将围绕 “使用标记创建树形菜单” 这一主题，通过循序渐进的讲解和代码示例，帮助编程初学者和中级开发者快速掌握 jQuery EasyUI 树形菜单的创建与定制技巧。我们将从基础语法开始，逐步深入高级功能，并通过实际案例巩固知识点，确保读者能够学以致用。

环境准备与基础概念

1. 开发环境配置

使用 jQuery EasyUI 需要引入以下核心资源：

• jQuery：JavaScript 库，用于基础 DOM 操作和事件处理。
• EasyUI 核心文件：包含 jquery.easyui.min.js 和 themes 文件夹中的 CSS 样式。

可以通过 CDN 引入这些资源，具体代码如下：

<!-- 引入 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. 树形菜单的核心概念

树形菜单由以下基本元素构成：

• 节点（Node）：树中的一个层级单元，可以包含子节点。
• 根节点（Root Node）：树的顶层节点，通常不显示具体内容，作为子节点的容器。
• 叶子节点（Leaf Node）：没有子节点的末端节点。

形象比喻：可以将树形菜单想象成一个文件系统。根节点是“我的电脑”，子节点是各个磁盘（如 C 盘、D 盘），而文件夹和文件则是更深层的叶子节点。

使用标记创建基础树形菜单

1. 标记语法简介

jQuery EasyUI 允许通过 HTML 标记 直接定义树形结构，无需手动编写复杂的 JavaScript 代码。其核心标记是 <ul> 和 <li>，配合 data-options 属性进行配置。

示例代码：最简单的树形菜单

<ul id="basicTree" class="easyui-tree">
  <li>
    <span>根节点</span>
    <ul>
      <li>子节点 1</li>
      <li>子节点 2</li>
    </ul>
  </li>
</ul>

标记解析：

• id="basicTree"：为树指定唯一标识，方便后续操作。
• class="easyui-tree"：通过 EasyUI 的类名将 <ul> 转换为树形菜单。
• 内层 <ul> 和 <li> 定义子节点层级关系。

2. 节点属性配置

通过 data-options 属性可以为节点添加更多功能，例如：

• 是否可展开/折叠（collapsed）
• 是否为叶子节点（leaf）
• 图标（iconCls）

示例代码：配置节点属性

<ul id="configTree" class="easyui-tree">
  <li data-options="collapsed: true">
    <span>根节点（初始折叠）</span>
    <ul>
      <li data-options="leaf: true, iconCls: 'icon-file'">叶子节点（文件图标）</li>
      <li data-options="attributes: {url: '/detail'}">带属性的节点</li>
    </ul>
  </li>
</ul>

属性说明：

高级功能与交互

1. 动态加载数据

在实际开发中，树形数据通常从服务器动态获取。可通过 url 属性指定数据接口，或通过 JavaScript 方法手动加载数据。

示例代码：动态加载数据

<ul id="dynamicTree" class="easyui-tree" data-options="url: '/api/tree-data'">
</ul>

数据格式示例（JSON）：

[
  {
    "text": "根节点",
    "state": "closed",
    "children": [
      { "text": "子节点 1" },
      { "text": "子节点 2" }
    ]
  }
]

2. 事件绑定与回调

通过 onBeforeExpand、onClick 等事件，可以实现节点展开、点击时的交互逻辑。

示例代码：绑定点击事件

$("#dynamicTree").tree({
  onClick: function(node) {
    if (node.attributes && node.attributes.url) {
      window.location.href = node.attributes.url;
    }
  }
});

3. 样式与主题定制

jQuery EasyUI 提供了多种内置主题（如 default、metro），也可以通过 CSS 自定义样式。

示例代码：自定义节点图标

/* 自定义文件图标样式 */
.easyui-tree span[iconcls="icon-file"]::before {
  content: "\f016"; /* Font Awesome 文件图标编码 */
}

实战案例：创建可展开的分类导航

案例目标

构建一个电商网站的分类导航树，要求：

1. 根节点为“商品分类”，子节点为“电子产品”、“服装鞋帽”等。
2. 每个子节点下包含具体子分类。
3. 点击叶子节点跳转至对应商品列表页面。

实现步骤

1. 编写 HTML 结构

<div style="padding: 20px;">
  <ul id="categoryTree" class="easyui-tree">
    <li>
      <span>商品分类</span>
      <ul>
        <li>
          <span>电子产品</span>
          <ul>
            <li data-options="leaf: true, attributes: {url: '/electronics/mobile'}">手机</li>
            <li data-options="leaf: true, attributes: {url: '/electronics/laptop'}">笔记本电脑</li>
          </ul>
        </li>
        <li>
          <span>服装鞋帽</span>
          <ul>
            <li data-options="leaf: true, attributes: {url: '/clothing/shirts'}">上衣</li>
            <li data-options="leaf: true, attributes: {url: '/clothing/shoes'}">鞋子</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. 添加交互逻辑

$(document).ready(function() {
  // 初始化树形菜单
  $("#categoryTree").tree({
    animate: true // 开启动画效果
  });

  // 绑定点击事件
  $("#categoryTree").tree({
    onClick: function(node) {
      if (node.attributes && node.attributes.url) {
        window.location.href = node.attributes.url;
      }
    }
  });
});

3. 效果展示

• 用户点击“手机”节点时，跳转到 /electronics/mobile 页面。
• 树形节点支持展开/折叠动画，提升用户体验。

总结与扩展

通过本文的讲解，读者已掌握以下核心能力：

1. 使用标记语法快速创建基础树形菜单。
2. 通过 data-options 属性配置节点行为与样式。
3. 实现动态数据加载和事件交互逻辑。
4. 完成一个可复用的分类导航案例。

进阶方向

• 异步加载：结合 onBeforeExpand 事件实现按需加载子节点数据。
• 权限控制：根据用户角色动态隐藏或显示特定节点。
• 拖拽功能：通过 easyui-draggable 实现节点拖拽排序。

jQuery EasyUI 树形菜单的灵活性和易用性，使其成为构建复杂层级结构的首选工具。希望本文能帮助开发者快速上手，并为实际项目提供参考价值。