jQuery EasyUI 数据网格 – 创建子网格

下面直接给你最实用、最专业的创建子网格（subgrid / 主从网格）方法，jQuery EasyUI 通过官方 detailview 扩展实现，点击主网格行左边的“+”号展开显示完整的子 datagrid（支持远程加载、编辑、复选框、分页等），复制粘贴就能用，领导最爱的“订单主表 + 商品明细子表”效果全都有！

前提：必须引入 detailview 扩展
在 jquery.easyui.min.js 之后添加：

<script src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>

（或从官网下载最新版）

方法1：最经典 – 主网格展开显示子网格（推荐现在就用这个，超级专业！）

<table id="dg" class="easyui-datagrid" title="订单主表（展开显示订单明细子网格）" style="width:900px;height:500px"
    data-options="
        url:'get_orders.php',          <!-- 主表数据接口 -->
        fitColumns:true,
        singleSelect:true,
        pagination:true,
        rownumbers:true,
        view: detailview,              <!-- 关键：使用 detailview -->
        detailFormatter: function(index,row){
            return '<div style=\"padding:10px\"><table class=\"subgrid\"></table></div>';
        },
        onExpandRow: function(index,row){
            var subgrid = $(this).datagrid('getRowDetail',index).find('table.subgrid');
            subgrid.datagrid({
                url:'get_order_items.php?order_id='+row.id,  <!-- 子表数据接口，根据主行ID加载 -->
                fitColumns:true,
                singleSelect:false,
                rownumbers:true,
                pagination:false,
                height:'auto',
                columns:[[
                    {field:'ck',checkbox:true},
                    {field:'product_id',title:'商品ID',width:80},
                    {field:'product_name',title:'商品名称',width:200},
                    {field:'price',title:'单价',width:100,align:'right'},
                    {field:'quantity',title:'数量',width:80,align:'center'},
                    {field:'subtotal',title:'小计',width:120,align:'right',
                        formatter:function(v,r){return (r.price*r.quantity).toFixed(2);}}
                ]],
                onResize:function(){
                    $('#dg').datagrid('fixDetailRowHeight',index);
                },
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $('#dg').datagrid('fixDetailRowHeight',index);
                    },0);
                }
            });
            $('#dg').datagrid('fixDetailRowHeight',index);
        }
    ">
    <thead>
        <tr>
            <th field="id" width="80">订单ID</th>
            <th field="customer" width="150">客户</th>
            <th field="total" width="120" align="right">订单金额</th>
            <th field="date" width="120">下单日期</th>
            <th field="status" width="80">状态</th>
        </tr>
    </thead>
</table>

效果：

• 主网格每行左边有“+”号，点击展开显示完整的子网格
• 子网格根据主行ID远程加载明细数据，支持复选框、列运算、行号等
• 高度自动适配，展开多个行互不影响，报表感爆棚！

方法2：子网格也支持行内编辑 + 保存（更高级）
在子网格 columns 里加 editor，在 onLoadSuccess 后绑定保存逻辑即可（结合之前行内编辑代码）。

方法3：嵌套子网格（子网格里再展开子子网格）
只需在子网格也加 view: detailview 和 onExpandRow 逻辑，就能实现三级、四级嵌套（官方有 Nested SubGrid demo）。

你现在直接复制方法1的代码，准备好两个接口（主表 + 子表明细），引入 detailview.js，刷新页面就能看到完美的主从子网格效果了！
结合之前的复选框 + 分页 + 行内编辑 + 页脚摘要 + 条件行颜色，你的订单管理系统已经可以直接上线了。

想要我给你一个完整的HTML示例（带本地模拟数据 + 子网格编辑 + 合计计算 + 多级嵌套）？
或者你告诉我你的主表/子表字段（比如“客户订单 + 商品明细”或“部门 + 员工”），我2分钟发你精准适配的代码，复制就能跑！

快说说你的具体场景，我手把手帮你搞定，5分钟内看到超级专业的子网格效果！