以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 创建子网格（SubGrid）”的专业回答。我将详细讲解 jQuery EasyUI 中数据网格（DataGrid）如何创建子网格（SubGrid），包括实现方法、配置选项和应用场景，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新版本为参考。

jQuery EasyUI 数据网格 – 创建子网格（SubGrid）

1. 引言

jQuery EasyUI 的数据网格（DataGrid）支持子网格（SubGrid）功能，通过在主网格的行中嵌入子网格，可以展示层次化的关联数据，例如订单与订单详情的关系。本教程将从基础到高级，带你掌握如何创建子网格，并提供实用示例。

2. 子网格概述

2.1 什么是子网格？

定义：子网格是嵌套在 DataGrid 行内的另一个 DataGrid，用于展示与主行相关的详细信息。
实现方式：通过 detailView 和 onExpandRow 事件动态创建子网格。

2.2 子网格的应用场景

层次数据展示：如订单列表（主网格）及其明细（子网格）。
数据扩展：在主网格中提供更多上下文信息。
参考：jQuery EasyUI 官方文档 DataGrid DetailView 部分（jeasyui.com/documentation）。

3. 创建基础子网格

3.1 准备工作

引入依赖：需要 jQuery 和 EasyUI 的核心文件。

<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">

3.2 实现子网格

步骤：

在主 DataGrid 中启用 view: detailview。
使用 onExpandRow 事件为每行创建子网格。

示例：

<table id="dg" class="easyui-datagrid" data-options="view: detailview, onExpandRow: function(index, row) { expandRow(index, row); }">
  <thead>
    <tr>
      <th data-options="field:'id'">ID</th>
      <th data-options="field:'name'">名称</th>
    </tr>
  </thead>
</table>
<script>
function expandRow(index, row) {
  var subgrid = $('#dg').datagrid('getRowDetail', index).html('<table></table>');
  subgrid.find('table').datagrid({
    data: [{ detailId: 1, detailName: '详情 ' + row.id }],
    columns: [[
      { field: 'detailId', title: '详情ID', width: 100 },
      { field: 'detailName', title: '详情名称', width: 200 }
    ]]
  });
}
</script>

3.3 实例：基础主子网格

以下是一个基础主子网格的完整示例：

<!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: 600px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>基础子网格</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
           data-options="
             view: detailview,
             onExpandRow: function(index, row) { expandRow(index, row); },
             rownumbers: true,
             singleSelect: true">
      <thead>
        <tr>
          <th data-options="field:'id',width:100">订单ID</th>
          <th data-options="field:'name',width:200">订单名称</th>
          <th data-options="field:'amount',width:100,align:'right'">金额</th>
        </tr>
      </thead>
    </table>
  </div>
  <script>
    // 主网格数据
    var data = {
      total: 5,
      rows: [
        { id: 1, name: '订单 1', amount: 100 },
        { id: 2, name: '订单 2', amount: 200 },
        { id: 3, name: '订单 3', amount: 300 },
        { id: 4, name: '订单 4', amount: 400 },
        { id: 5, name: '订单 5', amount: 500 }
      ]
    };
    $('#dg').datagrid('loadData', data);

    // 子网格展开逻辑
    function expandRow(index, row) {
      var subgrid = $('#dg').datagrid('getRowDetail', index).html('<table></table>');
      subgrid.find('table').datagrid({
        data: [
          { detailId: row.id + '-1', detailName: '详情 1 for ' + row.name, price: row.amount * 0.5 },
          { detailId: row.id + '-2', detailName: '详情 2 for ' + row.name, price: row.amount * 0.3 }
        ],
        columns: [[
          { field: 'detailId', title: '详情ID', width: 100 },
          { field: 'detailName', title: '详情名称', width: 200 },
          { field: 'price', title: '价格', width: 100, align: 'right' }
        ]],
        fitColumns: true,
        height: 'auto'
      });
    }
  </script>
</body>
</html>

运行方法：保存为 HTML 文件，在浏览器中打开。
效果：主网格显示 5 个订单，点击行左侧“+”号展开子网格，展示订单的详细信息。

4. 高级子网格配置

4.1 动态加载子网格数据

方法：在 onExpandRow 中通过 AJAX 从服务器加载子网格数据。
示例：

function expandRow(index, row) {
  var subgrid = $('#dg').datagrid('getRowDetail', index).html('<table></table>');
  subgrid.find('table').datagrid({
    url: 'get_sub详情.php?id=' + row.id,
    columns: [[
      { field: 'detailId', title: '详情ID', width: 100 },
      { field: 'detailName', title: '详情名称', width: 200 }
    ]]
  });
}

4.2 自定义子网格样式

方法：通过 CSS 或 onExpandRow 中的配置调整子网格外观。
示例：

.subgrid-table { background: #f9f9f9; border: 1px solid #ddd; }

4.3 实例：服务器端动态子网格

以下是一个服务器端动态子网格的完整示例：

前端代码

<!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: 600px; margin: 20px auto; }
    .subgrid-table { background: #f9f9f9; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <div class="container">
    <h1>服务器端动态子网格</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
           data-options="
             url: 'get_main_data.php',
             view: detailview,
             onExpandRow: function(index, row) { expandRow(index, row); },
             rownumbers: true,
             singleSelect: true">
      <thead>
        <tr>
          <th data-options="field:'id',width:100">订单ID</th>
          <th data-options="field:'name',width:200">订单名称</th>
          <th data-options="field:'amount',width:100,align:'right'">金额</th>
        </tr>
      </thead>
    </table>
  </div>
  <script>
    function expandRow(index, row) {
      var subgrid = $('#dg').datagrid('getRowDetail', index).html('<table class="subgrid-table"></table>');
      subgrid.find('table').datagrid({
        url: 'get_sub_data.php?id=' + row.id,
        columns: [[
          { field: 'detailId', title: '详情ID', width: 100 },
          { field: 'detailName', title: '详情名称', width: 200 },
          { field: 'price', title: '价格', width: 100, align: 'right' }
        ]],
        fitColumns: true,
        height: 'auto',
        onLoadSuccess: function() {
          $(this).datagrid('fixRowHeight'); // 修复行高
        }
      });
    }
  </script>
</body>
</html>

后端代码（`get_main_data.php`）

<?php
header('Content-Type: application/json');
echo json_encode([
  'total' => 5,
  'rows' => [
    ['id' => 1, 'name' => '订单 1', 'amount' => 100],
    ['id' => 2, 'name' => '订单 2', 'amount' => 200],
    ['id' => 3, 'name' => '订单 3', 'amount' => 300],
    ['id' => 4, 'name' => '订单 4', 'amount' => 400],
    ['id' => 5, 'name' => '订单 5', 'amount' => 500]
  ]
]);
?>

后端代码（`get_sub_data.php`）

<?php
header('Content-Type: application/json');
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
echo json_encode([
  'rows' => [
    ['detailId' => $id . '-1', 'detailName' => '详情 1 for 订单 ' . $id, 'price' => $id * 50],
    ['detailId' => $id . '-2', 'detailName' => '详情 2 for 订单 ' . $id, 'price' => $id * 30]
  ]
]);
?>

运行方法：

将 HTML 保存为 index.html，PHP 文件保存为 get_main_data.php 和 get_sub_data.php。
使用本地服务器（如 XAMPP）运行，确保 PHP 环境可用。

效果：主网格显示订单列表，展开行时从服务器动态加载子网格数据，子网格带有自定义样式。

5. 最佳实践与注意事项

5.1 设计与实现建议

数据关联：确保主网格和子网格的数据通过唯一标识（如 id）关联。
行高修复：使用 fixRowHeight 解决子网格高度异常问题。

5.2 性能优化与调试

性能：避免一次性加载过多子网格数据，必要时结合分页（参考添加分页组件）。
调试：使用浏览器开发者工具检查 AJAX 请求和子网格渲染。

6. 结论

jQuery EasyUI 的子网格功能通过 detailView 提供了展示层次数据的强大支持。本文通过基础和服务器端动态示例展示了创建子网格的过程，帮助你快速上手。如果需要处理海量数据，可参考使用虚拟滚动视图或访问 jQuery EasyUI 官方文档（jeasyui.com）。

回答特点

结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
实用性：从静态数据到服务器端动态加载，覆盖实际需求。
内部链接：通过 <a href="#ID"> 跳转，如创建基础子网格。
出站链接：嵌入正文，指向官方文档。

如何运行

基础示例直接保存为 HTML 文件打开即可；高级示例需配置本地服务器运行 PHP 文件。

jQuery EasyUI 数据网格 – 创建子网格（SubGrid）

jQuery EasyUI 数据网格 – 创建子网格（SubGrid）

目录

1. 引言

2. 子网格概述

2.1 什么是子网格？

2.2 子网格的应用场景

3. 创建基础子网格

3.1 准备工作

3.2 实现子网格

3.3 实例：基础主子网格

4. 高级子网格配置

4.1 动态加载子网格数据

4.2 自定义子网格样式

4.3 实例：服务器端动态子网格

前端代码

后端代码（`get_main_data.php`）

后端代码（`get_sub_data.php`）

5. 最佳实践与注意事项

5.1 设计与实现建议

5.2 性能优化与调试

6. 结论

回答特点

如何运行

lichongyang

发表回复取消回复

近期文章

近期评论

归档

分类

jQuery EasyUI 数据网格 – 创建子网格（SubGrid）

目录

前端代码

后端代码（get_main_data.php）

后端代码（get_sub_data.php）

回答特点

如何运行

lichongyang

发表回复 取消回复

近期文章

近期评论

归档

分类

后端代码（`get_main_data.php`）

后端代码（`get_sub_data.php`）

发表回复取消回复