以下是以资深软件开发工程师的视角，对“jQuery EasyUI 树形菜单 – 创建复杂树形网格”的专业回答。我将详细讲解如何使用 jQuery EasyUI 创建一个复杂的树形网格（TreeGrid），包括多级嵌套、动态加载、自定义样式和事件处理，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 15 日的最新信息，使用 jQuery EasyUI 1.10.x（最新稳定版）和 jQuery 3.7.1 为参考。

jQuery EasyUI 树形菜单 – 创建复杂树形网格

目录

  1. 引言
  2. 复杂树形网格概述
  1. 创建复杂树形网格
  1. 高级功能实现
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的树形网格（TreeGrid）是一个功能强大的组件，适合展示复杂的层次数据。创建复杂树形网格需要结合多级嵌套、动态数据加载和交互功能，本教程将通过一个项目管理系统的实例，带你深入掌握其实现方法，提升你的开发能力。

2. 复杂树形网格概述

2.1 什么是复杂树形网格？

  • 定义：复杂树形网格是 jQuery EasyUI TreeGrid 的高级应用，支持多级嵌套、多列展示、动态数据加载和自定义交互。
  • 用途：适用于项目管理、文件系统、组织架构等需要深度层次和复杂数据的场景。

2.2 关键特性

  • 多级嵌套：支持无限层级的树形结构。
  • 动态加载：按需从服务器获取子节点数据。
  • 自定义列：支持格式化、排序和编辑。
  • 交互性：提供展开、折叠、点击等事件。

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>

3.2 定义结构与事件

  • 基本配置：
$("#treegrid").treegrid({
  width: 800,
  height: 400,
  idField: "id",
  treeField: "name",
  columns: [[
    { field: "name", title: "名称", width: 300 },
    { field: "status", title: "状态", width: 100 },
    { field: "deadline", title: "截止日期", width: 150 }
  ]]
});

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>
    .completed { color: green; }
    .pending { color: red; }
  </style>
</head>
<body>
  <h1>项目管理系统</h1>
  <table id="treegrid" class="easyui-treegrid" style="width:800px;height:400px"></table>

  <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() {
      $("#treegrid").treegrid({
        idField: "id",
        treeField: "name",
        rownumbers: true,
        columns: [[
          { field: "name", title: "项目/任务名称", width: 400 },
          { field: "status", title: "状态", width: 100,
            formatter: function(value) {
              return value === "已完成" ? '<span class="completed">已完成</span>' : '<span class="pending">进行中</span>';
            }
          },
          { field: "deadline", title: "截止日期", width: 150 }
        ]],
        data: [
          { id: 1, name: "项目 A", status: "进行中", deadline: "2025-04-01", state: "closed", children: [
            { id: 11, name: "任务 A1", status: "已完成", deadline: "2025-03-20" },
            { id: 12, name: "任务 A2", status: "进行中", deadline: "2025-03-25" }
          ]},
          { id: 2, name: "项目 B", status: "进行中", deadline: "2025-05-01", children: [
            { id: 21, name: "任务 B1", status: "已完成", deadline: "2025-04-10" },
            { id: 22, name: "任务 B2", status: "进行中", deadline: "2025-04-15", children: [
              { id: 221, name: "子任务 B2-1", status: "进行中", deadline: "2025-04-12" }
            ]}
          ]}
        ],
        onClickRow: function(row) {
          alert("点击了: " + row.name);
        }
      });
    });
  </script>
</body>
</html>

运行方法：

  1. 保存为 index.html。
  2. 在浏览器打开，查看多级树形网格，点击行触发事件。
    效果：展示项目和任务的层次结构，状态使用颜色区分，点击弹出名称。

4. 高级功能实现

4.1 动态加载与服务器数据

  • 配置动态加载：
$("#treegrid").treegrid({
  url: "get_projects.php",
  idField: "id",
  treeField: "name",
  loadFilter: function(data) {
    return data;
  }
});
  • 服务器端（示例 PHP）：
<?php
header("Content-Type: application/json");
echo json_encode([
  ["id" => 1, "name" => "项目 A", "status" => "进行中", "deadline" => "2025-04-01", "state" => "closed"],
  ["id" => 11, "name" => "任务 A1", "status" => "已完成", "deadline" => "2025-03-20", "_parentId" => 1]
]);
?>

4.2 自定义样式与格式化

  • 列格式化：
{ field: "deadline", title: "截止日期", width: 150,
  formatter: function(value) {
    return value ? new Date(value).toLocaleDateString() : "";
  }
}
  • 行样式：
onLoadSuccess: function() {
  $("#treegrid").treegrid("getRootNodes").each(function() {
    if ($(this).attr("status") === "已完成") {
      $(this).addClass("completed");
    }
  });
}

4.3 事件与交互

  • 展开/折叠事件：
onExpand: function(row) {
  console.log("展开: " + row.name);
},
onCollapse: function(row) {
  console.log("折叠: " + row.name);
}
  • 双击编辑（需引入扩展）：
onDblClickRow: function(row) {
  $("#treegrid").treegrid("beginEdit", row.id);
}

5. 最佳实践与注意事项

5.1 代码组织与模块化

  • 分离逻辑：
function initTreeGrid() {
  $("#treegrid").treegrid({ /* 配置 */ });
}
$(document).ready(initTreeGrid);

5.2 性能优化与调试

  • 性能：大数据时使用 loadFilter 优化数据加载。
  • 调试：检查 idField 和 treeField 是否与数据匹配，使用 console.log(row) 查看行数据。

6. 结论

jQuery EasyUI 的复杂树形网格通过多级嵌套和动态功能，能满足复杂的层次数据展示需求。本文通过项目管理实例展示了其高级用法，帮助你掌握其实现过程。如果想深入学习，可参考 实例：项目管理系统 或访问 jQuery EasyUI 文档。

回答特点

  • 结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
  • 实用性：深入复杂用法，适合有基础的开发者。
  • 内部链接：通过 <a href="#ID"> 跳转，如 高级功能实现。
  • 出站链接：嵌入正文，如 jQuery EasyUI 文档。

如何运行

  1. 复制示例代码到 index.html。
  2. 在浏览器打开，测试复杂树形网格的功能。

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