以下是以资深软件开发工程师的视角，对“jQuery EasyUI 表单 – 创建树形下拉框”的专业回答。我将详细讲解如何使用 jQuery EasyUI 创建一个树形下拉框（TreeCombo 或 ComboTree），包括配置、数据加载和实例应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 15 日的最新信息，使用 jQuery EasyUI 1.10.x（最新稳定版）和 jQuery 3.7.1 为参考。

jQuery EasyUI 表单 – 创建树形下拉框

目录

  1. 引言
  2. 树形下拉框概述
  1. 创建树形下拉框
  1. 高级树形下拉框功能
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的树形下拉框（ComboTree）是一种强大的表单组件，结合了下拉框和树形结构的优势，适用于展示层次数据并允许用户选择。本教程将通过实例讲解如何创建和使用树形下拉框，帮助你快速将其集成到表单中。

2. 树形下拉框概述

2.1 什么是树形下拉框？

  • 定义：树形下拉框（ComboTree）是 EasyUI 的一个组件，继承自 combo 和 tree，在下拉面板中显示树形结构，用户可选择节点。
  • 用途：常用于分类选择、部门选择等需要层次结构的场景。

2.2 EasyUI ComboTree 的优势

  • 层次展示：支持多级树形数据。
  • 灵活性：支持静态数据和动态加载。
  • 易用性：内置选择和展开功能，集成到表单简单。

3. 创建树形下拉框

3.1 引入与基础配置

  • 通过 CDN 引入：
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  • 基本配置：
<input id="dept" class="easyui-combotree" style="width:200px">
<script>
  $("#dept").combotree({
    data: [
      { id: 1, text: "部门 A" },
      { id: 2, text: "部门 B" }
    ]
  });
</script>

3.2 静态数据与动态加载

  • 静态数据：
$("#dept").combotree({
  data: [
    { id: 1, text: "公司", children: [
      { id: 11, text: "开发部" },
      { id: 12, text: "销售部" }
    ]}
  ]
});
  • 动态加载：
$("#dept").combotree({
  url: "get_depts.php",
  method: "get"
});

3.3 实例：部门选择器

以下是一个集成到表单的树形下拉框示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>树形下拉框 - 部门选择</title>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <style>
    .form-row { margin: 10px 0; }
  </style>
</head>
<body>
  <h1>用户信息</h1>
  <div style="padding:20px">
    <form id="userForm" method="post">
      <div class="form-row">
        <input class="easyui-textbox" name="username" style="width:200px" 
               data-options="label:'用户名:',required:true">
      </div>
      <div class="form-row">
        <input id="dept" class="easyui-combotree" name="department" style="width:200px" 
               data-options="label:'部门:',required:true">
      </div>
      <div class="form-row">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#userForm').form('clear')">重置</a>
      </div>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#dept").combotree({
        url: "get_depts.php",
        method: "get",
        onLoadSuccess: function() {
          console.log("部门数据加载完成");
        }
      });
    });

    function submitForm() {
      if ($("#userForm").form("validate")) {
        $("#userForm").form("submit", {
          url: "submit.php",
          success: function(data) {
            var response = JSON.parse(data);
            $.messager.alert(response.success ? "成功" : "错误", response.message);
            if (response.success) $("#userForm").form("clear");
          }
        });
      } else {
        $.messager.alert("提示", "请填写完整信息");
      }
    }
  </script>
</body>
</html>

后端（get_depts.php）：

<?php
header("Content-Type: application/json");
echo json_encode([
  ["id" => 1, "text" => "公司", "state" => "closed", "children" => [
    ["id" => 11, "text" => "开发部"],
    ["id" => 12, "text" => "销售部"]
  ]],
  ["id" => 2, "text" => "子公司", "state" => "closed", "children" => [
    ["id" => 21, "text" => "市场部"]
  ]]
]);
?>

后端（submit.php）：

<?php
header("Content-Type: application/json");
$data = $_POST;
if (empty($data["username"]) || empty($data["department"])) {
  echo json_encode(["success" => false, "message" => "所有字段必填"]);
} else {
  echo json_encode(["success" => true, "message" => "提交成功"]);
}
?>

运行方法：

  1. 配置本地服务器（如 XAMPP），将 index.html、get_depts.php 和 submit.php 放入同一目录。
  2. 访问 http://localhost/index.html，选择部门并提交表单。
    效果：下拉框显示树形部门结构，提交时验证并异步处理。

4. 高级树形下拉框功能

4.1 多选与级联选择

  • 多选：
$("#dept").combotree({
  multiple: true,
  cascadeCheck: true // 级联选择子节点
});
  • 获取值：
var values = $("#dept").combotree("getValues"); // 返回数组

4.2 事件处理与自定义

  • 选择事件：
onSelect: function(node) {
  console.log("选择了:", node.text);
}
  • 自定义显示：
formatter: function(node) {
  return node.text + " (" + node.id + ")";
}

5. 最佳实践与注意事项

5.1 设计与用户体验

  • 数据层级：保持树形结构清晰，避免过深嵌套。
  • 默认值：设置初始选择：
$("#dept").combotree("setValue", 11);

5.2 调试与性能

  • 调试：检查 onLoadSuccess 的数据和 getValue 的返回值。
  • 性能：大数据时使用动态加载，减少初始请求量。

6. 结论

jQuery EasyUI 的树形下拉框（ComboTree）通过简单的配置即可实现层次数据选择，极大地丰富了表单功能。本文通过部门选择器实例详解了其创建过程，帮助你掌握其应用。如果想深入学习，可参考 实例：部门选择器 或访问 jQuery EasyUI 文档。

回答特点

  • 结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
  • 实用性：聚焦树形下拉框，适合中高级开发者。
  • 内部链接：通过 <a href="#ID"> 跳转，如 创建树形下拉框。
  • 出站链接：嵌入正文，如 jQuery EasyUI 文档。

如何运行

  1. 配置本地服务器，放入 index.html、get_depts.php 和 submit.php。
  2. 访问页面，测试树形下拉框功能。

请确认此回答是否符合你的期望，或者提出下一个问题，我将继续按此格式回答！