异常教程

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）常被用于展示层级化的数据，如文件系统、组织架构或分类导航。然而，默认的树组件往往功能有限，无法直接支持节点编辑。jQuery EasyUI 扩展 – 可编辑的树则完美解决了这一痛点，它通过扩展 EasyUI 的原生树组件，允许用户直接在页面上对树节点进行增删改操作，极大提升了用户体验和开发效率。

本文将从零开始，以循序渐进的方式讲解如何实现这一功能。无论是编程初学者还是有一定经验的开发者，都能通过本文掌握可编辑树的核心逻辑与实际应用。

可编辑树的核心概念

什么是树形结构？

树形结构是一种分层数据模型，每个节点可以包含子节点，形成父子关系。例如，文件系统的目录结构、公司部门的层级关系，都是典型的树形数据。

在 jQuery EasyUI 中，树组件通过 tree 插件实现，但默认情况下，用户只能查看节点，无法直接编辑。可编辑的树通过扩展这一功能，允许用户通过双击节点、右键菜单或按钮触发编辑模式，实时修改节点名称或属性。

关键特性

  1. 实时编辑：用户无需跳转页面即可修改节点内容。
  2. 数据联动：编辑后的数据可自动同步到后端数据库。
  3. 可视化交互：支持拖拽、删除、新增等操作，增强交互性。

实现可编辑树的步骤

第一步：环境准备

安装 jQuery 和 EasyUI

在 HTML 文件中引入必要的资源：

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

初始化基础树结构

定义一个空的树容器，并通过 data-options 配置树的基本属性：

<div id="tree" class="easyui-tree"  
     data-options="url: '/api/tree-data',  
                   method: 'get',  
                   animate: true,  
                   lines: true"></div>

第二步：添加编辑功能

方法一：双击触发编辑

通过监听 onDblClick 事件，实现双击节点进入编辑模式：

$("#tree").tree({  
  onDblClick: function(node) {  
    // 判断节点是否可编辑（例如排除根节点）  
    if (node.id !== 0) {  
      $("#tree").tree("beginEdit", node.target);  
    }  
  }  
});

方法二：右键菜单触发

通过 EasyUI 的 menu 插件，添加右键菜单选项：

<!-- 右键菜单模板 -->
<div id="contextMenu" style="width:100px;display:none;">  
  <div data-options="iconCls:'icon-edit'">编辑</div>  
  <div class="menu-separator"></div>  
  <div data-options="iconCls:'icon-add'">添加子节点</div>  
</div>

绑定菜单事件：

$("#tree").tree({  
  onContextMenu: function(e, node) {  
    e.preventDefault();  
    $("#contextMenu").menu("show", {  
      left: e.pageX,  
      top: e.pageY  
    });  
    // 传递当前节点信息  
    $("#contextMenu").data("node", node);  
  }  
});  

// 菜单项点击事件  
$("#contextMenu").menu({  
  onClick: function(item) {  
    const node = $("#contextMenu").data("node");  
    if (item.text === "编辑") {  
      $("#tree").tree("beginEdit", node.target);  
    } else if (item.text === "添加子节点") {  
      $("#tree").tree("append", {  
        parent: node.target,  
        data: [{text: "新节点", state: "closed"}]  
      });  
    }  
  }  
});

第三步：处理编辑后的数据

当用户完成编辑后，需要将修改后的数据同步到后端。可以通过 onAfterEdit 事件捕获节点信息：

$("#tree").tree({  
  onAfterEdit: function(target, data) {  
    const node = $(target);  
    const newNode = {  
      id: node.attr("node-id"),  
      text: data.text,  
      pid: node.parent().attr("node-id") || 0  
    };  
    // 发送 AJAX 请求更新数据  
    $.post("/api/save-node", newNode, function(response) {  
      if (response.success) {  
        $.messager.show({  
          title: "提示",  
          msg: "节点已保存"  
        });  
      }  
    });  
  }  
});

实际案例：部门管理系统的可编辑树

场景描述

假设需要开发一个企业部门管理系统，要求用户能直接在树形结构中修改部门名称、添加子部门或删除冗余节点。

HTML 结构

<div class="easyui-panel" title="部门管理" style="width:300px;height:400px;padding:10px;">  
  <div id="deptTree" class="easyui-tree"></div>  
</div>

JavaScript 代码

// 初始化树并加载数据  
$("#deptTree").tree({  
  url: "/api/departments",  
  method: "get",  
  lines: true,  
  animate: true,  
  onDblClick: function(node) {  
    if (node.id > 0) {  
      $(this).tree("beginEdit", node.target);  
    }  
  },  
  onBeforeEdit: function(target) {  
    // 验证节点是否为空  
    return $(target).text().trim() !== "";  
  },  
  onAfterEdit: function(target, data) {  
    const node = $(target);  
    const updatedNode = {  
      id: node.attr("node-id"),  
      text: data.text,  
      parentId: node.parent().attr("node-id") || 0  
    };  
    // 调用后端接口更新数据  
    updateNode(updatedNode);  
  },  
  onBeforeDrop: function(targetNode, sourceNode) {  
    // 禁止拖拽到自身子节点  
    return !isChild(targetNode, sourceNode);  
  }  
});  

// 辅助函数：判断是否为父子关系  
function isChild(parent, child) {  
  // 实现逻辑略  
  return false;  
}

高级功能扩展

动态加载与异步数据

对于大数据量的场景，可结合 loadFilter 实现懒加载：

$("#tree").tree({  
  url: "/api/dynamic-data",  
  loadFilter: function(data) {  
    // 处理返回的 JSON 数据，例如：  
    return data.rows;  
  }  
});

集成表单验证

在编辑节点时，添加表单验证规则：

$("#tree").tree({  
  onBeforeEdit: function(target) {  
    const text = $(target).text();  
    if (text.length < 2) {  
      $.messager.alert("提示", "名称至少为2个字符");  
      return false;  
    }  
    return true;  
  }  
});

常见问题与解决方案

问题1：节点编辑后样式错乱

原因：默认编辑器可能覆盖了自定义样式。
解决：在 CSS 中重写编辑输入框的样式：

.tree-node-editing .tree-title {  
  display: none;  
}  
.tree-node-editing input {  
  width: 100%;  
  padding: 2px;  
  border: 1px solid #ccc;  
}

问题2：拖拽节点时触发编辑

原因：拖拽事件与双击事件冲突。
解决：在拖拽前取消编辑状态：

$("#tree").tree({  
  onBeforeDrag: function(node) {  
    $(this).tree("cancelEdit");  
    return true;  
  }  
});

结论

jQuery EasyUI 扩展 – 可编辑的树通过灵活的配置和事件绑定，将静态树结构升级为交互式组件，显著提升了开发效率和用户体验。本文从基础概念、实现步骤到高级扩展，逐步演示了如何构建一个功能完善的可编辑树。

对于开发者而言，掌握这一扩展不仅能解决常见的树形数据编辑需求，还能为后续开发更复杂的交互功能（如权限控制、多级联动）打下坚实基础。建议读者在实际项目中结合业务场景，进一步优化数据同步逻辑和用户验证规则，以实现更健壮的解决方案。

最新发布

查看更多文章