异常教程

jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单（长文讲解）

更新时间:

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

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

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

前言：为什么选择 jQuery EasyUI 树形菜单？

在 Web 开发中，树形菜单（Tree Menu）是一种常见的交互组件，它能够将复杂的层级数据以直观的方式呈现给用户。而当树形菜单结合复选框功能时，便能实现多选、父子节点联动等高级操作，广泛应用于权限管理、配置选项、分类筛选等场景。jQuery EasyUI 作为一款成熟的前端 UI 框架，提供了高度封装的树形菜单组件，开发者仅需少量代码即可快速实现功能。本文将手把手教你如何通过 EasyUI 创建带复选框的树形菜单，适合编程初学者快速入门，也适合中级开发者深入掌握细节。

环境准备：搭建开发环境

在开始前，请确保已完成以下准备工作：

  1. 引入 EasyUI 资源：需在 HTML 文件中引入 jQuery、EasyUI 的 CSS 和 JS 文件。代码示例如下：

    <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://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

  2. HTML 结构：创建一个容器元素，用于承载树形菜单：

    <div id="tree" class="easyui-tree" style="width:300px;"></div>

基础树形菜单的创建：从零开始构建

核心配置参数解析

EasyUI 树形菜单通过 easyui-tree 类初始化，核心配置参数如下表：

参数名作用描述示例值
data直接指定本地数据源（JSON 格式）[...]
url指定远程数据源的接口地址"data/tree.json"
method请求方式（GET/POST）"POST"
animate是否启用折叠动画效果true
checkbox是否显示复选框true

比喻说明：将树形菜单想象成一棵真实的树，每个节点（Node）都有父节点（Parent）和子节点（Children）。data 参数就像树的种子，决定了树的生长形态。

第一个树形菜单实例

<div id="tree" class="easyui-tree" data-options="url:'data/tree.json', method:'get', checkbox:true"></div>

注意：data-options 属性用于传入初始化配置，url 需指向符合 EasyUI 格式的 JSON 数据。

复选框功能详解：实现父子联动

父子节点联动原理

复选框的核心逻辑是“父节点与子节点状态同步”。例如：

  • 全选：父节点选中时，所有子节点自动选中。
  • 半选：部分子节点选中时，父节点显示为半选状态。
  • 全不选：父节点和所有子节点均未选中。

比喻说明：想象一个家庭树，如果家长（父节点）勾选“全家出游”，那么所有孩子（子节点）的“是否参与”选项会自动跟随，这就是父子联动的直观体现。

数据格式要求

复选框功能需要在节点数据中添加 checked 属性，示例如下：

[
  {
    "id": 1,
    "text": "水果",
    "state": "closed",  // 或 "open"
    "children": [
      {"id": 11, "text": "苹果", "checked": false},
      {"id": 12, "text": "香蕉", "checked": true}
    ]
  }
]

数据加载方式：本地与远程数据源

本地数据加载

直接在 HTML 中通过 data 参数传递数据：

$("#tree").tree({
  data: [
    {
      text: "电子产品",
      children: [
        {text: "手机", checked: false},
        {text: "笔记本", checked: true}
      ]
    }
  ],
  checkbox: true
});

远程数据加载

通过 url 参数请求接口，示例代码如下：

$("#tree").tree({
  url: "/api/get-tree-data",
  method: "post",
  checkbox: true,
  onLoadSuccess: function() {
    console.log("数据加载完成");
  }
});

事件处理：响应用户交互

常用事件类型

事件名触发场景回调参数
onClick节点被点击时node
onCheck复选框状态改变时node, checked
onExpand节点展开时node
onCollapse节点折叠时node

复选框事件监听示例

$("#tree").tree({
  checkbox: true,
  onCheck: function(node, checked) {
    console.log("节点ID：" + node.id);
    console.log("是否选中：" + checked);
    // 自定义逻辑：如同步到后端
  }
});

扩展功能：实现级联选择

父子节点状态同步

通过 cascadeCheck 属性（需 EasyUI 1.7+ 版本）实现自动联动：

$("#tree").tree({
  checkbox: true,
  cascadeCheck: true
});

手动实现联动逻辑（兼容旧版本）

$("#tree").tree({
  checkbox: true,
  onCheck: function(node, checked) {
    // 选中父节点时，递归选中所有子节点
    if (checked) {
      $("#tree").tree("check", node.id);
      var children = $("#tree").tree("getChildren", node.target);
      $.each(children, function() {
        $("#tree").tree("check", this.id);
      });
    }
  }
});

常见问题与解决方案

问题1：复选框未显示

可能原因：未正确配置 checkbox: true，或数据中缺少 checked 字段。 解决方法：检查初始化配置和数据格式。

问题2：数据加载失败

可能原因：接口返回的数据格式不符合 EasyUI 要求。 解决方法：确保 JSON 数据包含 text、id 字段，子节点需用 children 数组。

问题3：父子联动失效

可能原因：未启用 cascadeCheck 或自定义逻辑错误。 解决方法：检查版本兼容性或手动实现递归逻辑。

结论：树形菜单的实战应用场景

通过本文，你已掌握如何使用 jQuery EasyUI 快速构建带复选框的树形菜单。该技术在以下场景中具有显著优势：

  • 权限管理：在用户角色配置中，通过勾选菜单节点分配权限。
  • 分类筛选：电商平台的多级商品分类筛选功能。
  • 配置中心：系统设置界面中，通过树形结构管理复杂的配置项。

建议读者通过以下步骤深化理解：

  1. 在本地环境复现本文示例。
  2. 尝试扩展功能，如添加右键菜单、异步加载子节点。
  3. 结合后端技术（如 RESTful API）实现数据持久化。

掌握树形菜单的复选框功能，将为你的前端开发技能锦上添花，助力应对复杂项目的挑战。

最新发布

查看更多文章