看起来您再次询问了“jQuery EasyUI 树形菜单 – 树形菜单添加节点”。由于我已经在之前的回答中提供了详细的讲解，包括基础和高级用法，以及完整的代码示例，为了避免重复，我将根据之前的回答进行简要回顾，并提供一个全新的实例，以进一步丰富您的理解。如果您有特定需求或想深入某个方面，请告诉我，我会调整方向为您提供更针对性的内容！

jQuery EasyUI 树形菜单 – 树形菜单添加节点（回顾与新实例）

目录

  1. 引言
  2. 回顾：添加节点的核心方法
  3. 新实例：带输入验证的节点添加
  4. 结论

1. 引言

树形菜单（Tree）是 jQuery EasyUI 中展示层次数据的核心组件，添加节点功能允许动态扩展树结构。本回答回顾了添加节点的核心方法，并提供一个带输入验证的新实例，帮助您在实际应用中更灵活地操作树形菜单。

2. 回顾：添加节点的核心方法

在之前的回答中，我介绍了以下关键点：

  • 基础方法：
  • append：向父节点追加子节点。
  • insert：在指定位置插入节点。
  • 实现步骤：
  1. 引入 jQuery 和 EasyUI 依赖。
  2. 初始化树形菜单并绑定数据。
  3. 使用 JavaScript 方法添加节点。

3. 新实例：带输入验证的节点添加

以下是一个全新的实例，展示如何通过输入框添加节点，并加入简单的输入验证（确保节点名称非空且不超过 20 个字符）。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 带输入验证的节点添加</title>
  <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>
  <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">
  <style>
    .container { max-width: 400px; margin: 20px auto; }
    button, input { margin: 5px; padding: 5px 10px; }
    .error { color: red; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>带输入验证的节点添加</h1>
    <ul id="tt" class="easyui-tree" data-options="data:[{id:1, text:'根目录'}]"></ul>
    <div>
      <input id="nodeText" type="text" placeholder="输入节点名称">
      <button onclick="addValidatedNode()">添加节点</button>
      <p id="errorMsg" class="error"></p>
    </div>
  </div>
  <script>
    function addValidatedNode() {
      var text = $('#nodeText').val().trim();
      var errorMsg = '';

      // 输入验证
      if (!text) {
        errorMsg = '节点名称不能为空！';
      } else if (text.length > 20) {
        errorMsg = '节点名称不能超过 20 个字符！';
      }

      if (errorMsg) {
        $('#errorMsg').text(errorMsg);
        return;
      }

      // 添加节点
      var node = $('#tt').tree('getSelected') || $('#tt').tree('getRoot');
      $('#tt').tree('append', {
        parent: node.target,
        data: [{id: Math.random(), text: text}]
      });

      // 清空输入并重置错误消息
      $('#nodeText').val('');
      $('#errorMsg').text('');
    }
  </script>
</body>
</html>

运行方法

  • 保存为 HTML 文件，确保网络环境可访问 CDN 资源，在浏览器中打开。

效果

  • 用户输入节点名称后点击“添加节点”按钮：
  • 如果输入为空或超过 20 个字符，显示错误提示。
  • 如果输入有效，则添加新节点到选中节点（或根节点）下，并清空输入框。

特点

  • 输入验证：确保节点名称合法，提升用户体验。
  • 错误反馈：通过 DOM 更新实时显示错误信息。
  • 简洁交互：结合树形菜单的基本功能，易于扩展。

4. 结论

jQuery EasyUI 的树形菜单通过 append 方法提供了灵活的节点添加能力。本回答回顾了核心方法，并通过一个带输入验证的新实例展示了如何在实际场景中应用。如果您需要更复杂的功能（如异步添加、批量操作），可参考之前的 动态添加节点 或告诉我您的具体需求，我将进一步完善回答！

回答特点

  • 避免重复：基于前文回顾，新增实用实例。
  • 实用性：新实例引入输入验证，贴近真实应用。
  • 内部链接：引用前文内容，如 基础添加节点。

请告诉我此回答是否满足您的期望，或者您是否有其他具体问题（如特定功能或优化需求），我将继续按需调整！