jQuery EasyUI使用教程:在数据网格中扩展行显示详细信息
数据网格可以更改它的视图来显示不同的效果。使用详细视图，数据网格可以在数据行的左边显示展开按钮（“+”或“-”）。用户可以展开行来显示附加的详细信息。
Step 1：创建数据网格
| Item ID | Product ID | List Price | Unit Cost | Status |
|---|
Step 2：为数据网格设置详细视图
想要使用详细视图，请记住在页面头部引用视图脚本文件。
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:false,
href:'datagrid21_getdetail.php?itemid='+row.itemid,
onLoad:function{
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});我们定义 'detailFormatter' 函数，告诉数据网格如何渲染详细视图。 在这种情况下,我们返回一个简单的 'div' 元素，它将充当详细内容的容器。 请注意，详细信息为空。当用户点击展开按钮（'+'）时，onExpandRow事件将被触发。 所以我们可以写一些代码来加载ajax详细内容。最后我们调用'fixDetailRowHeight'方法来固定当详细内容加载时的行高度。
Step 3：服务器代码
datagrid21_getdetail.php
| "; ?> | Item ID: | Product ID: | ||
| List Price: | Unit Cost: | |||
| Attribute: | ||||
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
Telerik UI联合慧都科技全场让利!全线7.5折！
慧都科技，十三年行业经验，专注提供软件技术整体解决方案，致力打造全球最大的软件技术一站式服务平台。
慧都控件｜帮助企业打造成功软件
慧都提供全球优质控件产品/控件培训/项目定制开发/方案咨询/现场实施/项目外包/专业测试
微信ID：EVGET_Huidu
企业QQ：800018081｜电话：023-66090381
扫码关注微信
