以下是以资深软件开发工程师的视角，对“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 是一个强大的 HTML5 框架，其树形网格（TreeGrid）组件结合了树形结构和表格功能，适用于展示层次数据。创建基础树形网格是掌握 EasyUI 的重要一步，本教程将通过实例带你了解其实现方法，帮助你在项目中快速应用。

2. 树形网格概述

2.1 什么是树形网格？

  • 定义：树形网格（TreeGrid）是 jQuery EasyUI 的一个组件，继承自 DataGrid，增加了树形层次结构，用于展示父子关系的表格数据。
  • 用途：常用于文件管理、组织架构或任何需要层次展示的场景。

2.2 基础特性

  • 树形展示：通过 treeField 指定树节点字段。
  • 多列支持：结合表格的多列显示能力。
  • 扩展性：支持动态加载、编辑、分页等功能。
  • 参考：jQuery EasyUI 官网

3. 创建基础树形网格

3.1 引入 jQuery EasyUI

  • 通过 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 定义 HTML 和 JavaScript

  • 基本结构：
<table id="treegrid" class="easyui-treegrid"></table>
<script>
  $("#treegrid").treegrid({
    width: 700,
    height: 300,
    idField: "id",
    treeField: "name",
    columns: [[
      { field: "name", title: "名称", width: 200 },
      { field: "size", title: "大小", width: 100 }
    ]]
  });
</script>

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">
</head>
<body>
  <h1>文件夹浏览器</h1>
  <table id="treegrid" class="easyui-treegrid" style="width:700px;height:300px"
         data-options="
           rownumbers: true,
           idField: 'id',
           treeField: 'name',
           data: [
             { id: 1, name: '文档', size: '' },
             { id: 11, name: '报告.pdf', size: '1MB', _parentId: 1 },
             { id: 12, name: '笔记.txt', size: '50KB', _parentId: 1 },
             { id: 2, name: '图片', size: '' },
             { id: 21, name: '风景.jpg', size: '2MB', _parentId: 2 }
           ],
           columns: [[
             { field: 'name', title: '名称', width: 400 },
             { field: 'size', title: '大小', width: 200, align: 'right' }
           ]]">
  </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>
</body>
</html>

运行方法：

  1. 保存为 index.html。
  2. 在浏览器打开，查看树形结构的文件夹浏览器。
    效果：展示带有层次关系的文件列表，点击展开/折叠父节点。

4. 数据格式与加载

4.1 静态数据

  • 格式：使用 _parentId 指定父子关系，或嵌套 children 数组。
[
  { id: 1, name: "文档", size: "" },
  { id: 11, name: "报告.pdf", size: "1MB", _parentId: 1 }
]

或：

[
  { id: 1, name: "文档", size: "", children: [
    { id: 11, name: "报告.pdf", size: "1MB" }
  ]}
]

4.2 动态加载

  • 配置 URL：
$("#treegrid").treegrid({
  url: "get_data.php",
  idField: "id",
  treeField: "name"
});
  • 后端返回（示例 PHP）：
<?php
header("Content-Type: application/json");
echo json_encode([
  ["id" => 1, "name" => "文档", "size" => ""],
  ["id" => 11, "name" => "报告.pdf", "size" => "1MB", "_parentId" => 1]
]);
?>

5. 最佳实践与注意事项

5.1 代码组织

  • 分离配置：
function initTreeGrid() {
  $("#treegrid").treegrid({
    idField: "id",
    treeField: "name"
  });
}
$(document).ready(initTreeGrid);

5.2 性能与调试

  • 性能：大数据时使用动态加载，避免一次性加载过多节点。
  • 调试：检查 treeField 和 idField 是否正确匹配数据。

6. 结论

jQuery EasyUI 的树形网格通过简单配置即可实现层次数据的展示，适用于多种场景。本文通过文件夹浏览器实例详解了其创建过程，帮助你快速上手。如果想深入学习，可参考 实例：文件夹浏览器 或访问 jQuery EasyUI 文档。

回答特点

  • 结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
  • 实用性：专注于基础树形网格，适合初学者。
  • 内部链接：通过 <a href="#ID"> 跳转，如 创建基础树形网格。
  • 出站链接：嵌入正文，如 jQuery EasyUI 官网。

如何运行

  1. 复制示例代码到 index.html。
  2. 在浏览器打开，查看树形网格效果。

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