当前位置: 编程技术>jquery
jquery easyui展开datagrid行显示明细数据
来源: 互联网 发布时间：2014-10-08
本文导语: jquery easyui中的datagrid可以切换不同的视图，当使用detailview时，可以让用户展开行以显示该行的详细信息。 行的明细信息可以通过ajax的方式进行加载。 如下图： 使用detailview时，首先建立表格基本框架： 代码示例: ...
jquery easyui中的datagrid可以切换不同的视图，当使用detailview时，可以让用户展开行以显示该行的详细信息。
行的明细信息可以通过ajax的方式进行加载。
如下图：
使用detailview时，首先建立表格基本框架：
代码示例:
item id
product id
list price
unit cost
status
表格的定义可以在table标签中进行，所以不用再编写js代码。
接着，应用detailview并定义如何展开加载明细内容：
代码示例:
$('#dg').datagrid({
view: detailview,
detailformatter:function(index,row){
return '';
},
onexpandrow: function(index,row){
$('#ddv-'+index).panel({
border:false,
cache:false,
href:'datagrid21_getdetail.php?itemid='+row.itemid,
onload:function(){
$('#dg').datagrid('fixdetailrowheight',index);
}
});
$('#dg').datagrid('fixdetailrowheight',index);
}
});
view: detailview,
detailformatter:function(index,row){
return '';
},
onexpandrow: function(index,row){
$('#ddv-'+index).panel({
border:false,
cache:false,
href:'datagrid21_getdetail.php?itemid='+row.itemid,
onload:function(){
$('#dg').datagrid('fixdetailrowheight',index);
}
});
$('#dg').datagrid('fixdetailrowheight',index);
}
});
在展开行时再动态通过ajax的方式加载行的明细信息，明细信息的内容及布局可以是任意的，如下所示：
代码示例:
www.
item id:
product id:
list price:
unit cost:
attribute:
原文参考：http://www.jeasyui.com/tutorial/datagrid/datagrid21.php
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。