下面直接给你最实用、最常见的扩展行显示细节（detail view / 行展开详情）方法，jQuery EasyUI datagrid 通过官方扩展 detailview 实现，点击“+”号展开行显示额外细节（文字、图片、表单、子表格等），复制粘贴就能用，领导最爱的“主从表格、订单详情展开、编辑表单隐藏在下面”效果全都有！
前提：引入 detailview 扩展文件
EasyUI 官方提供 datagrid-detailview.js 文件，你需要额外引入（放在 jquery.easyui.min.js 之后）：
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="datagrid-detailview.js"></script> <!-- 关键：这个文件从官网下载或复制代码 -->（下载地址：官网 Extension 页面或搜索 “datagrid-detailview.js” 直接复制源码保存为 js 文件）
方法1：最简单 – 展开显示简单文字/图片详情（推荐现在就用这个）
<table id="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>
<th data-options="field:'id',width:60">ID</th>
<th data-options="field:'name',width:150">姓名</th>
<th data-options="field:'age',width:80">年龄</th>
<th data-options="field:'email',width:200">邮箱</th>
</tr>
</thead>
</table>效果：每行左边出现“+”号，点击展开显示自定义 HTML 内容，超级简单！
方法2：展开时异步加载详情（AJAX 加载子内容，经典订单详情）
<table id="dg" class="easyui-datagrid" title="订单列表（展开显示订单详情）" style="width:800px;height:500px"
data-options="
url:'orders.json',
fitColumns:true,
singleSelect:true,
view: detailview,
detailFormatter: function(index, row){
return '<div class=\"ddv\" style=\"padding:10px;\"></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>
<th data-options="field:'orderid',width:100">订单号</th>
<th data-options="field:'customer',width:150">客户</th>
<th data-options="field:'total',width:100,align:'right'">金额</th>
<th data-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){
var ddv = $(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分钟内看到超级专业的展开细节效果！
