本文详细介绍如何在jQuery EasyUI DataGrid中创建子网格。通过配置详细视图（detailview）和onExpandRow事件，实现点击主网格行展开显示子数据表格。教程包含主网格HTML结构、JavaScript详细视图配置以及后端PHP数据接口示例，并提供修复行高和性能优化的关键代码。

主网格与子网格效果预览

在数据网格（DataGrid）中，详细视图允许用户点击行首的展开按钮（“+”号）来显示附加的详细信息。子网格可以动态加载任何内容，包括另一个数据网格。这种层级结构非常适合展示主从关系的数据，例如订单与订单明细。

前置准备：引入详细视图脚本

要使用详细视图功能，必须在页面头部引入 EasyUI 提供的详细视图脚本文件。这是实现子网格功能的基础依赖。

第1步：引入 detailview.js 脚本

在 HTML 文件的 部分添加以下脚本引用：

加载该脚本后，DataGrid 组件将具备处理详细视图的能力。

创建主网格 HTML 结构

首先，需要定义主数据网格的 HTML 结构。主网格负责展示顶层数据，并为子网格的展开提供入口。

第2步：编写主网格 HTML 代码

使用

在此结构中，url 属性指定了获取主网格数据的后端接口。配置 singleSelect="true" 和 fitColumns="true" 以优化用户体验。

配置详细视图与子网格逻辑

这是实现子网格的核心步骤。通过 JavaScript 初始化 DataGrid，并配置 view 为 detailview。同时，需要定义 detailFormatter 和 onExpandRow 事件处理函数。

第3步：初始化 DataGrid 并配置详细视图

在页面加载完成后，执行以下 JavaScript 代码来初始化主网格并绑定详细视图逻辑：

$('#dg').datagrid({
    view: detailview,
    detailFormatter:function(index,row){
        return '
';
    },
    onExpandRow: function(index,row){
        var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
        ddv.datagrid({
            url:'datagrid22_getdetail.php?itemid='+row.itemid,
            fitColumns:true,
            singleSelect:true,
            rownumbers:true,
            loadMsg:'',
            height:'auto',
            columns:[[
                {field:'orderid',title:'Order ID',width:100},
                {field:'quantity',title:'Quantity',width:100},
                {field:'unitprice',title:'Unit Price',width:100}
            ]],
            onResize:function(){
                $('#dg').datagrid('fixDetailRowHeight',index);
            },
            onLoadSuccess:function(){
                setTimeout(function(){
                    $('#dg').datagrid('fixDetailRowHeight',index);
                },0);
            }
        });
        $('#dg').datagrid('fixDetailRowHeight',index);
    }
});

代码逻辑解析：

• detailFormatter：当用户点击展开按钮时触发。该函数返回一个包含子网格容器的 HTML 字符串（）。
  onExpandRow：在详细视图展开后执行。它获取子网格容器，并初始化一个新的 DataGrid 实例作为子网格。
  子网格配置：子网格通过 url 获取数据，URL 中携带了主网格当前行的 itemid，以便后端返回对应的明细数据。
  高度修复：子网格加载成功或调整大小时，调用 fixDetailRowHeight 方法，确保主网格的行高能正确适应子网格的内容高度，避免布局错乱。

  后端数据接口实现

  前端需要两个后端接口：一个用于获取主网格数据，另一个用于根据主网格行的 ID 获取子网格数据。以下示例使用 PHP 实现，并建议将已废弃的 mysql 扩展替换为更安全的 mysqli 或 PDO。

  第4步：实现主数据接口 (datagrid22_getdata.php)

  该接口负责查询并返回主网格所需的数据列表：

  第5步：实现子数据接口 (datagrid22_getdetail.php)

  该接口接收前端传递的 itemid 参数，并返回对应的明细数据：

  注意：在实际生产环境中，请务必使用预处理语句（Prepared Statements）来防止 SQL 注入攻击。

  常见问题与调整

  子网格高度显示异常

  表现：子网格内容超出容器或被截断，主网格行高未自动调整。
  原因：子网格动态加载内容后，主网格未重新计算行高。
  解决方法：确保在子网格的 onResize 和 onLoadSuccess 事件中调用 $('dg').datagrid('fixDetailRowHeight', index)。

  子网格数据未加载

  表现：展开主网格行后，子网格显示空白或加载失败。
  原因：后端接口路径错误、参数传递失败或数据库查询无结果。
  解决方法：检查浏览器控制台网络请求，确认 datagrid22_getdetail.php 是否正确接收了 itemid 参数并返回了有效的 JSON 数据。

  总结

  通过配置 jQuery EasyUI DataGrid 的详细视图（detailview），可以轻松实现主从数据的层级展示。关键在于正确引入 detailview.js，并在 onExpandRow 事件中动态初始化子网格。同时，务必处理子网格的高度自适应问题，以保证界面的美观和可用性。对于后端接口，建议使用现代数据库扩展（如 mysqli 或 PDO）以提升安全性。

  以上就是 jQuery EasyUI 数据网格子网格实现的详细内容，更多关于 jQuery EasyUI 的资料请关注本站其它相关文章！

  来源：https://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid22.html
  jQuery EasyUI DataGrid 子网格 详细视图 detailview
  上一篇jQuery EasyUI DataGrid 虚拟滚动视图实现海量数据平滑加载 下一篇jQuery EasyUI 属性网格创建与配置详解
  本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。

  相关推荐

  补充同频道和同主题内容，方便继续浏览更多相关内容。

  同类最新

  继续查看同栏目最近更新的文章。

  更多

  

  前端开发 · 2026-09-01

  CSS3入门指南：常用特性解析与实战练习路径

  CSS3是现代网页开发的核心技术，涵盖圆角、阴影、渐变、过渡、动画及响应式布局等高频特性。本文梳理了CSS3的核心应用场景、分步学习路径与综合练习案例，帮助初学者快速建立从基础排版到现代交互的完整开发思路，并规避常见样式陷阱。

  

  前端开发 · 2026-09-01

  CSS border 边框属性详解：语法、拆分写法与常见问题排查

  本文系统讲解CSS标准边框属性border的完整语法结构，涵盖简写与拆分写法、单边控制技巧及border-radius配合方案。针对边框不显示、元素尺寸异常等高频问题提供排查路径，帮助开发者快速掌握边框设置规范并提升界面视觉一致性。

  

  前端开发 · 2026-09-01

  CSS3动画属性有哪些：常用属性与用法说明

  CSS3动画主要分为transition过渡与animation关键帧两类。本文梳理常用属性、简写语法与@keyframes规则，结合悬停、入场、循环等场景给出代码示例与选型建议，帮助开发者快速写出流畅且可控的动画效果。

  

  前端开发 · 2026-09-01

  CSS3渐变色语法与常见用法

  CSS3渐变色通过纯代码生成平滑颜色过渡，广泛用于按钮、横幅与卡片背景。本文系统梳理线性与径向渐变的核心语法、方向控制、停靠点设置及多层叠加技巧，提供可直接复用的场景代码，并给出兼容性策略与常见渲染异常排查方法，帮助开发者快速构建稳定、可维护的渐变样式。

  

  前端开发 · 2026-09-01

  CSS3手册中文版下载指南：获取渠道、筛选标准与使用建议

  寻找CSS3手册中文版下载资源时，如何判断来源可靠性、筛选高质量内容并有效使用？本文从获取渠道、版本识别、下载验收到替代方案，提供一套可执行的判断标准，帮助你快速找到适合学习或查阅的中文手册。