首页
/ 正文

jQuery EasyUI 数据网格 – 创建子网格（超详细）

更新时间: 2025-04-04 19:34:59

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在 Web 开发领域，数据展示与交互是核心需求之一。jQuery EasyUI 作为一款功能强大的前端框架，凭借其丰富的组件库和直观的 API 设计，成为开发者快速构建动态界面的首选工具。其中，数据网格（DataGrid） 是 EasyUI 最受关注的组件之一，它能够以表格形式高效展示大量数据，并支持排序、分页、过滤等基础功能。然而，当业务场景需要展示层级化数据（如订单与订单详情、部门与员工信息）时，创建子网格 就成为进阶需求。

本文将从零开始，通过理论与实践结合的方式，深入讲解如何利用 jQuery EasyUI 的数据网格组件实现子网格功能。无论您是编程新手还是有一定基础的开发者，都能通过本文掌握这一技巧，并将其灵活运用于实际项目中。

一、理解数据网格与子网格的概念

1.1 数据网格（DataGrid）的基础作用

数据网格是 EasyUI 提供的表格组件，用于以结构化形式展示数据。它支持以下核心功能：

动态加载数据：通过 AJAX 从服务端获取数据。
分页与排序：允许用户分页查看数据，并通过点击列标题进行升序或降序排序。
列自定义：开发者可自由定义列的名称、宽度、对齐方式等属性。

例如，一个简单的订单列表数据网格可能包含以下列：订单编号、客户姓名、订单金额、创建时间。

1.2 子网格（Subgrid）的诞生背景

在实际业务中，数据往往存在层级关系。例如：

订单与订单详情（如商品名称、数量、单价）
部门与部门下的员工
父分类与子分类

此时，若将所有层级数据展现在同一张表格中，会导致界面混乱且用户体验差。子网格的出现，正是为了解决这一问题：它允许在数据网格的某一列中嵌入另一个数据网格，形成“主表+子表”的结构。

比喻：子网格就像一本书中的“章节”。主网格是目录，子网格是章节内的具体内容，用户点击某一目录项时，即可展开对应的详细内容。

二、创建子网格的准备工作

2.1 环境搭建

在开始编码前，请确保已安装以下工具和依赖：

jQuery：EasyUI 的依赖库，需先引入。
jQuery EasyUI：可通过 CDN 或本地文件引入。
HTML 页面结构：用于承载数据网格的容器。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="mainGrid"></div>
</body>
</html>

2.2 数据准备

子网格的实现依赖于两组数据：

主网格数据：包含父级记录的标识（如订单 ID）。
子网格数据：与父级记录关联的详细数据（如订单详情）。

假设我们有一个订单系统，数据结构如下：
| 订单 ID | 客户姓名 | 订单金额 | 创建时间 |
|---------|----------|----------|----------|
| 1001 | 张三 | 200.00 | 2023-01-01 |
| 1002 | 李四 | 150.50 | 2023-01-02 |

对应的订单详情数据可能为：
| 订单 ID | 商品名称 | 数量 | 单价 |
|---------|----------|------|------|
| 1001 | 笔记本 | 2 | 50.00 |
| 1001 | 笔 | 10 | 10.00 |
| 1002 | 书包 | 1 | 150.50 |

三、实现子网格的步骤详解

3.1 步骤一：定义主网格的列配置

在 EasyUI 中，子网格的实现依赖于 subgrid 列的特殊配置。首先，需要在主网格的 columns 属性中添加一个子网格列：

$('#mainGrid').datagrid({
    // 其他配置项...
    columns: [[
        {field: 'orderID', title: '订单ID', width: 100},
        {field: 'customerName', title: '客户姓名', width: 120},
        {field: 'amount', title: '订单金额', width: 100, align: 'right'},
        // 子网格列的定义
        {field: 'subgrid', title: '订单详情', width: 100, 
         formatter: function(value, row) {
             return '<a href="#" class="easyui-tooltip" title="点击查看详情">详情</a>';
         },
         // 子网格的配置
         subgrid: {
             title: '订单详情',
             url: '/getOrderDetails', // 获取子数据的接口地址
             idField: 'orderID',
             // 子网格的列配置
             columns: [[
                 {field: 'productName', title: '商品名称', width: 120},
                 {field: 'quantity', title: '数量', width: 80},
                 {field: 'unitPrice', title: '单价', width: 100, align: 'right'}
             ]]
         }
        }
    ]],
});

3.2 步骤二：配置子网格的动态加载

子网格的数据通常需要根据父级记录的唯一标识（如订单 ID）动态加载。通过 url 参数指定后端接口地址，并在 onLoadSuccess 回调中处理数据：

// 在子网格配置中添加 onLoadSuccess 回调
subgrid: {
    // ...其他配置...
    onLoadSuccess: function(data) {
        // 数据加载成功时的处理逻辑（可选）
    }
}

3.3 步骤三：处理后端数据返回格式

后端接口（如 /getOrderDetails）需要返回符合 EasyUI 要求的 JSON 数据。例如：

{
    "total": 2,
    "rows": [
        {"productName": "笔记本", "quantity": 2, "unitPrice": 50.00},
        {"productName": "笔", "quantity": 10, "unitPrice": 10.00}
    ]
}

其中：

total：总记录数（用于分页，若不需要可忽略）。
rows：实际数据数组。

四、完整示例与代码解析

4.1 HTML 结构与初始化代码

<!-- 主网格容器 -->
<div id="mainGrid" style="width:100%;height:500px"></div>

4.2 JavaScript 配置代码

$(function() {
    // 初始化主网格
    $('#mainGrid').datagrid({
        url: '/getOrders', // 主数据接口地址
        fitColumns: true,
        rownumbers: true,
        columns: [[
            {field: 'orderID', title: '订单ID', width: 100},
            {field: 'customerName', title: '客户姓名', width: 120},
            {field: 'amount', title: '订单金额', width:100, align: 'right'},
            // 定义子网格列
            {field: 'subgrid', title: '订单详情', width: 100,
             formatter: function(value, row) {
                 return '<a href="#" class="easyui-tooltip" title="点击查看订单详情">详情</a>';
             },
             subgrid: {
                 title: '订单详情',
                 url: '/getOrderDetails', // 子数据接口地址
                 idField: 'orderID',
                 columns: [[
                     {field: 'productName', title: '商品名称', width: 120},
                     {field: 'quantity', title: '数量', width: 80},
                     {field: 'unitPrice', title: '单价', width: 100, align: 'right'}
                 ]],
                 // 可选：加载前的参数处理
                 onBeforeLoad: function(parentRow) {
                     // 将父级的 orderID 作为参数传递给子接口
                     return {orderID: parentRow.orderID};
                 }
             }
        ]],
        // 主网格的其他配置
        pagination: true,
        pageSize: 10
    });
});

4.3 关键点解析

formatter 函数：用于生成子网格的触发元素（如“详情”链接）。
idField：指定父级记录的唯一标识字段，子网格会根据该字段查询关联数据。
onBeforeLoad：允许在加载子网格前修改请求参数，例如将父级的 orderID 附加到请求中。

五、常见问题与解决方案

5.1 问题一：子网格数据未加载

可能原因：

后端接口返回的数据格式不符合 EasyUI 要求（缺少 total 或 rows 字段）。
父级记录的 idField 字段名称与后端接口参数不一致。

解决方案：

使用浏览器开发者工具检查网络请求，确认接口返回的 JSON 结构。
确保 onBeforeLoad 中传递的参数名称与后端接口要求匹配。

5.2 问题二：子网格样式错乱

可能原因：

子网格的列宽度设置过大，导致表格超出容器范围。
主网格与子网格的 CSS 样式冲突。

解决方案：

调整 width 属性值，或使用 fitColumns: true 自动适应列宽。

通过 CSS 覆盖样式，例如：

.datagrid-subgrid {
    margin-top: 5px;
}

六、子网格的进阶技巧

6.1 动态切换子网格内容

通过监听主网格的 rowclick 事件，可实现动态加载或刷新子网格：

$('#mainGrid').datagrid({
    onRowClick: function(index, row) {
        // 强制刷新子网格
        $(this).datagrid('toggleSubgrid', index);
    }
});

6.2 结合其他 EasyUI 组件

子网格中可嵌套其他 EasyUI 组件（如树形菜单、图表），例如：

// 在子网格的 columns 中添加图表列
{field: 'chart', title: '销售趋势', width: 200,
 formatter: function(value, row) {
     return '<div id="chart_' + row.orderID + '"></div>';
 },
 styler: function() {
     return 'height:150px;';
 }},
// 在 onLoadSuccess 中初始化图表
subgrid: {
    onLoadSuccess: function(data) {
        $(this).datagrid('getPanel').find('div[id^="chart_"]').each(function() {
            // 使用 ECharts 等库渲染图表
        });
    }
}

结论

通过本文的讲解，您已掌握了 jQuery EasyUI 数据网格 – 创建子网格 的完整流程。从基础概念到代码实现，再到常见问题的解决方案，这一技能将帮助您构建更复杂、更直观的 Web 界面。

子网格的核心价值在于数据层级关系的清晰展示，它不仅提升了用户体验，还减少了冗余数据的展示。未来，随着业务需求的变化，您可以进一步结合 EasyUI 的其他功能（如分页、筛选、编辑）来增强子网格的功能性。

希望本文能成为您技术成长路上的参考指南，如果遇到任何问题，欢迎在评论区交流！

jQuery EasyUI 数据网格 – 创建子网格（超详细）

一、理解数据网格与子网格的概念

1.1 数据网格（DataGrid）的基础作用

1.2 子网格（Subgrid）的诞生背景

二、创建子网格的准备工作

2.1 环境搭建

2.2 数据准备

三、实现子网格的步骤详解

3.1 步骤一：定义主网格的列配置

3.2 步骤二：配置子网格的动态加载

3.3 步骤三：处理后端数据返回格式

四、完整示例与代码解析

4.1 HTML 结构与初始化代码

4.2 JavaScript 配置代码

4.3 关键点解析

五、常见问题与解决方案

5.1 问题一：子网格数据未加载

5.2 问题二：子网格样式错乱

六、子网格的进阶技巧

6.1 动态切换子网格内容

6.2 结合其他 EasyUI 组件

结论

最新发布

CSS3 文本效果（超详细）

CSS3 字体（保姆级教程）

CSS3 2D 转换（长文讲解）

CSS3 3D 转换（长文讲解）

CSS3 过渡（长文解析）

CSS3 动画（长文讲解）

CSS3 多列（超详细）

CSS3 用户界面（长文解析）

JavaScript 简介（超详细）

JavaScript 用法（长文讲解）