异常教程

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 作为一款功能强大的前端框架，提供了开箱即用的树形菜单组件，极大简化了开发者对复杂层级结构的实现过程。其中，“树形菜单添加节点”是树形结构动态交互的核心功能之一。无论是新增子节点、父节点，还是调整节点顺序，均能通过 EasyUI 的 API 快速完成。本文将从基础概念到实战案例，系统性地讲解如何在 jQuery EasyUI 中实现树形菜单节点的添加操作，并附上代码示例与常见问题解答，帮助开发者高效掌握这一技能。

环境搭建与基础概念

开发环境准备

在开始前，请确保已安装以下工具和库：

  1. HTML/CSS/JavaScript：前端开发的基础三剑客。
  2. jQuery：EasyUI 依赖 jQuery 运行，需先引入 jQuery 库。
  3. jQuery EasyUI：可通过 CDN 或本地文件引入，版本建议选择 1.10 以上。

示例代码引入方式：

<!-- 引入 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>

树形菜单的结构解析

EasyUI 的树形菜单由 ul 和 li 标签构成，每个节点包含以下核心属性：

  • id：节点唯一标识符。
  • text：显示的节点名称。
  • children：子节点集合（可选）。
  • state：节点展开状态（如 open 或 closed）。

示例静态树形结构：

<ul id="menuTree">  
  <li>  
    <span>文件</span>  
    <ul>  
      <li>新建</li>  
      <li>打开</li>  
    </ul>  
  </li>  
</ul>

核心方法：动态添加节点的实现

初始化树形菜单

在操作树形菜单前，需通过 EasyUI 的 tree 方法将其初始化为可交互的组件：

$("#menuTree").tree({  
  data: [  
    {  
      text: "根节点",  
      state: "open",  
      children: [  
        { text: "子节点1" },  
        { text: "子节点2" }  
      ]  
    }  
  ]  
});

添加节点的三种场景

1. 在指定节点后追加子节点

使用 append 方法，将新节点添加到父节点的子节点列表末尾：

$("#menuTree").tree("append", {  
  parent: parentNode, // 父节点对象或其 id  
  data: [  
    { text: "新子节点", iconCls: "icon-add" }  
  ]  
});

比喻：如同在文件夹中新建文件，新文件会出现在文件列表的最后。

2. 在指定位置插入节点

通过 insertBefore 或 insertAfter 方法，控制节点插入的具体位置：

// 在目标节点前插入  
$("#menuTree").tree("insertBefore", {  
  target: targetNode, // 目标节点对象或 id  
  data: { text: "新节点" }  
});  

// 在目标节点后插入  
$("#menuTree").tree("insertAfter", {  
  target: targetNode,  
  data: { text: "新节点" }  
});

3. 向根节点直接添加兄弟节点

若未指定父节点，新节点将作为根节点的直接子节点：

$("#menuTree").tree("append", {  
  data: { text: "新根级节点" }  
});

实战案例：动态添加节点的完整流程

案例需求

构建一个简单的文件管理界面，允许用户通过按钮动态添加文件夹或文件。

实现步骤

  1. HTML 结构：
<div style="padding: 20px;">  
  <button onclick="addFolder()">添加文件夹</button>  
  <button onclick="addFile()">添加文件</button>  
  <div style="margin-top: 20px;">  
    <ul id="fileTree"></ul>  
  </div>  
</div>
  1. JavaScript 逻辑：
// 初始化树形菜单  
$(function() {  
  $("#fileTree").tree({  
    data: [  
      {  
        text: "我的文档",  
        iconCls: "icon-folder",  
        state: "closed"  
      }  
    ]  
  });  
});  

// 添加文件夹方法  
function addFolder() {  
  var parentNode = $("#fileTree").tree("find", "我的文档");  
  $("#fileTree").tree("append", {  
    parent: parentNode,  
    data: [  
      {  
        text: "新文件夹",  
        iconCls: "icon-folder",  
        state: "closed"  
      }  
    ]  
  });  
}  

// 添加文件方法  
function addFile() {  
  var parentNode = $("#fileTree").tree("find", "我的文档");  
  $("#fileTree").tree("append", {  
    parent: parentNode,  
    data: [  
      {  
        text: "新文件.txt",  
        iconCls: "icon-file"  
      }  
    ]  
  });  
}
  1. 效果说明：
  • 点击“添加文件夹”按钮时，会在“我的文档”节点下新增一个文件夹图标节点。
  • 点击“添加文件”按钮时，会添加一个文件图标节点。

进阶技巧：节点添加的高级场景

1. 动态加载子节点

通过 loadData 方法结合异步请求，实现按需加载数据：

$("#menuTree").tree({  
  onClick: function(node) {  
    if (node.children == undefined) { // 未加载子节点时触发请求  
      $.get("/api/getChildren", { parentId: node.id }, function(data) {  
        $("#menuTree").tree("loadData", data);  
      });  
    }  
  }  
});

2. 自定义节点样式

通过 iconCls 和自定义 CSS 实现差异化显示：

/* 定义文件夹和文件图标样式 */  
.icon-folder { background-image: url("folder.png"); }  
.icon-file { background-image: url("file.png"); }

常见问题与解决方案

问题 1：节点添加后未显示

原因：未正确指定父节点或未设置 state: "open"。
解决方案：

// 显式展开父节点  
$("#menuTree").tree("expand", parentNode);

问题 2：节点添加导致布局错乱

原因：未设置固定宽度或未启用 EasyUI 的布局管理器。
解决方案：

<!-- 使用 EasyUI 的 Panel 组件包裹树形菜单 -->  
<div class="easyui-panel" style="width: 300px; height: 400px;">  
  <ul id="menuTree"></ul>  
</div>

问题 3：多级嵌套节点性能下降

原因：大量节点未采用懒加载或未优化数据结构。
解决方案：

  • 启用懒加载，仅加载当前层级数据。
  • 使用 animate: false 禁用动画提升渲染速度。

结论

通过本文的学习，开发者应能掌握 jQuery EasyUI 树形菜单 – 树形菜单添加节点 的核心方法与实战技巧。无论是基础的节点追加、位置插入，还是结合异步请求的动态加载场景，均能通过 EasyUI 提供的 API 快速实现。树形菜单的灵活性使其在复杂数据展示和管理场景中不可或缺，而动态添加节点的功能则进一步增强了其交互能力。建议读者在实际项目中多尝试不同场景的实现，并结合 EasyUI 官方文档（https://www.jeasyui.com ）探索更多高级功能，如节点拖拽、复选框支持等，以提升开发效率与用户体验。

掌握这些技能后，开发者可将树形菜单无缝集成到权限管理系统、组织架构展示、多级分类导航等场景中，为用户创造高效直观的交互体验。

最新发布

查看更多文章