下面直接给你最实用、最常见的扩展行显示细节（detail view / 行展开详情）方法，jQuery EasyUI datagrid 通过官方扩展detailview实现，点击“+”号展开行显示额外细节（文字、图片、表单、子表格等），复制粘贴就能用，领导最爱的“主从表格、订单详情展开、编辑表单隐藏在下面”效果全都有！
前提：引入 detailview 扩展文件
EasyUI 官方提供datagrid-detailview.js文件，你需要额外引入（放在 jquery.easyui.min.js 之后）：
<scriptsrc="jquery.min.js"></script><scriptsrc="jquery.easyui.min.js"></script><scriptsrc="datagrid-detailview.js"></script><!-- 关键：这个文件从官网下载或复制代码 -->（下载地址：官网 Extension 页面或搜索 “datagrid-detailview.js” 直接复制源码保存为 js 文件）
方法1：最简单 - 展开显示简单文字/图片详情（推荐现在就用这个）
<tableid="dg"class="easyui-datagrid"title="扩展行显示细节"style="width:800px;height:500px"data-options="url:'data.json', fitColumns:true, singleSelect:true, pagination:true, rownumbers:true, view: detailview, <!-- 关键：使用 detailview --> detailFormatter: function(index, row){ return'<div style=\"padding:20px;\"><h3>' + row.name + ' 的详细信息</h3><p>这里可以放任何内容：文字、图片、表单等...</p></div>'; } "><thead><tr><thdata-options="field:'id',width:60">ID</th><thdata-options="field:'name',width:150">姓名</th><thdata-options="field:'age',width:80">年龄</th><thdata-options="field:'email',width:200">邮箱</th></tr></thead></table>效果：每行左边出现“+”号，点击展开显示自定义 HTML 内容，超级简单！
方法2：展开时异步加载详情（AJAX 加载子内容，经典订单详情）
<table id="dg" class="easyui-datagrid" title="订单列表（展开显示订单详情）" style="width:800px;height:500px" ></div>'; // 占位容器 }, onExpandRow: function(index, row){ var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv'); ddv.panel({ height:200, border:false, cache:false, href: 'order_detail.php?order_id=' + row.id, // 异步加载详情页面 onLoad: function(){ $('#dg').datagrid('fixDetailRowHeight', index); // 修复高度 } }); $('#dg').datagrid('fixDetailRowHeight', index); } "><thead><tr><thdata-options="field:'orderid',width:100">订单号</th><thdata-options="field:'customer',width:150">客户</th><thdata-options="field:'total',width:100,align:'right'">金额</th><thdata-options="field:'date',width:120">日期</th></tr></thead></table>效果：展开时 AJAX 加载详情页面（可以放表格、图片、表单），高度自动适配！
方法3：展开显示子表格（主从网格，超级专业！）
$('#dg').datagrid({view:detailview,detailFormatter:function(index,row){return'<div style="padding:2px"><table class="ddv"></table></div>';},onExpandRow:function(index,row){varddv=$(this).datagrid('getRowDetail',index).find('table.ddv');ddv.datagrid({url:'order_items.json?order_id='+row.orderid,fitColumns:true,singleSelect:true,rownumbers:true,loadMsg:'',height:'auto',columns:[[{field:'itemid',title:'商品ID',width:80},{field:'product',title:'商品名称',width:150},{field:'price',title:'单价',width:80,align:'right'},{field:'qty',title:'数量',width:60,align:'center'}]],onResize:function(){$('#dg').datagrid('fixDetailRowHeight',index);},onLoadSuccess:function(){setTimeout(function(){$('#dg').datagrid('fixDetailRowHeight',index);},0);}});$('#dg').datagrid('fixDetailRowHeight',index);}});效果：展开行显示一个完整的子 datagrid（订单商品明细），支持分页、排序，报表感爆棚！
方法4：在展开行放编辑表单（CRUD 经典用法）
在 detailFormatter 返回表单 HTML，在 onExpandRow 里绑定事件，实现展开即编辑。
你现在直接用方法2或方法3，复制代码 + 引入 datagrid-detailview.js，刷新就能看到行展开显示细节的效果了！
结合之前的复选框 + 分页 + 行内编辑 + 合并单元格 + 页脚摘要，你的后台系统已经可以直接交付了。
想要我给你一个完整的HTML示例（带子表格 + AJAX 加载 + 展开编辑表单）？
或者你告诉我你想在展开行放什么内容（比如“图片+描述”“明细表格”“编辑表单”“属性网格”），我2分钟发你完整代码，复制就能跑！
快说说你的具体需求，我手把手帮你搞定，5分钟内看到超级专业的展开细节效果！
