使用easyui实现在主表格的基础上实现每个主表格对应细表信息,效果如下:
首先除了jquery,easyui需要再引入datagrid-detailview.js,然后我们自己js写法如下:
$("#dg0").datagrid({
url : '',
border:false,
pagination:true,
pageSize:30,
singleSelect:true,
rownumbers:true,
fit:true,
nowrap:false,
columns : [[{...}]],
view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
},
onExpandRow:function(index,row){
var parentid = row.id;
$('#ddv-'+index).datagrid({
url:'loadDate.do?parentid=' + parentid,
singleSelect:true,
rownumbers:true,
pagination:true,
pageSize:15,
nowrap:false,
columns:[[{...}]],
onResize:function(){
$('#dg0').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#dg0').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#dg0').datagrid('fixDetailRowHeight',index);
}
});
view: detailview这行开始往下都是为子表格做准备的,仔细观察不难发现detailFormatter就是在主表格每一行下面新建一个table,onExpandRow就是来定义每一行主表格对应的子表格,注意子表格table的id对应起来就行。