jQuery EasyUI 树形菜单添加节点教程

本文详细介绍如何在 jQuery EasyUI 中向树形菜单动态添加子节点。通过获取选中节点并调用 append 方法，结合 JSON 数据格式，实现节点的动态扩展。包含完整的 HTML 结构、JavaScript 逻辑及关键 API 参数说明，帮助开发者快速掌握树形组件的高级用法。

最终效果预览

在操作完成后，原本只有基础分类的树形菜单将动态增加新的子项。例如，在“水果”节点下成功添加了“Raspberry”和“Cantaloupe”两个新节点，界面实时刷新显示新增内容。

前置准备

在开始编码之前，请确保您的开发环境满足以下条件：

• 引入库文件：已正确引入 jQuery 和 jQuery EasyUI 的核心 JS 及 CSS 文件。
• 数据源：准备一个用于初始化树形菜单的 JSON 数据文件（如 tree_data.json）。
• 基础结构：在 HTML 中定义好
  容器，并赋予其 easyui-tree 类。

实现步骤

第1步：创建基础树形菜单

首先，我们需要在 HTML 中定义一个基础的树形菜单容器。通过 url 属性指定数据源，EasyUI 会自动异步加载数据并渲染树形结构。

操作入口：HTML 编辑器

1. 创建一个
   容器用于限制宽度。
2. 在内部添加
   标签，设置 id="tt" 和 class="easyui-tree"。
3. 指定 url 属性指向你的 JSON 数据文件。

完成判断：页面加载后，应能看到一个包含初始数据的树形菜单，且边框样式生效。

第2步：获取当前选中节点

为了确定新节点添加的位置，我们需要先获取用户当前点击选中的节点。使用 getSelected 方法可以返回一个包含节点信息的 JavaScript 对象。

操作入口：JavaScript 控制台或脚本文件

1. 调用 $('tt').tree('getSelected') 获取选中节点。
2. 将结果赋值给变量 node。

var node = $('#tt').tree('getSelected');

完成判断：node 变量应包含 id、text 和 target 属性。其中 target 是该节点对应的 DOM 元素对象，后续添加节点将依赖此对象。

第3步：定义并追加新节点数据

接下来，我们构造需要添加的新节点数据，并调用 append 方法将其附加到父节点下。

操作入口：JavaScript 脚本

1. 检查 node 是否存在（即用户是否选中了节点）。
2. 定义一个包含新节点信息的数组 nodes，每个节点需包含 id 和 text。
3. 调用 $('tt').tree('append') 方法，传入 parent（父节点DOM对象）和 data（新节点数据数组）。

var node = $('#tt').tree('getSelected');
if (node){
    var nodes = [{
        "id":13,
        "text":"Raspberry"
    },{
        "id":14,
        "text":"Cantaloupe"
    }];
    $('#tt').tree('append', {
        parent:node.target,
        data:nodes
    });
}

完成判断：执行代码后，树形菜单应即时刷新，在选中的父节点下展开显示新添加的“Raspberry”和“Cantaloupe”节点。

关键 API 说明

• getSelected：获取当前选中的节点数据。如果未选中任何节点，返回 null。
• append：向指定父节点追加子节点。参数包括 parent（父节点的 DOM 对象，若为 null 则添加为根节点）和 data（新节点的 JSON 数据数组）。

常见问题与调整

问题：新节点未显示或报错

表现：调用 append 后界面无变化，或控制台报错。

原因：parent 参数传递错误，或 node 为 null 时未做判断直接操作。

解决方法：确保在调用 append 前检查 if (node)，并正确传递 node.target 而非 node 本身。

问题：节点 ID 冲突

表现：新增节点与现有节点 ID 重复，导致渲染异常。

原因：手动指定的 id 与树中已有节点 ID 冲突。

解决方法：确保新增节点的 id 在整棵树中是唯一的，或让 EasyUI 自动生成 ID。

总结

通过 getSelected 获取上下文，再利用 append 方法动态注入数据，是 jQuery EasyUI 树形菜单扩展节点的标准做法。掌握这一模式，可以轻松实现动态数据加载、右键菜单添加等功能。注意保持节点 ID 的唯一性，并确保父节点对象传递正确，即可避免常见错误。

以上就是 jQuery EasyUI 树形菜单添加节点的详细内容，更多关于 jQuery EasyUI 的资料请关注本站其它相关文章！