jQuery EasyUI使用教程:在数据网格中扩展行显示详细信息

数据网格可以更改它的视图来显示不同的效果。使用详细视图，数据网格可以在数据行的左边显示展开按钮（“+”或“-”）。用户可以展开行来显示附加的详细信息。

Step 1：创建数据网格

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

购买正版授权的朋友可以点击"咨询在线客服"哦~~~

Telerik UI联合慧都科技全场让利!全线7.5折！

慧都科技，十三年行业经验，专注提供软件技术整体解决方案，致力打造全球最大的软件技术一站式服务平台。

慧都控件｜帮助企业打造成功软件

慧都提供全球优质控件产品/控件培训/项目定制开发/方案咨询/现场实施/项目外包/专业测试

微信ID：EVGET_Huidu

企业QQ：800018081｜电话：023-66090381

扫码关注微信