easyUI下datagrid嵌套显示
主要是运用 easyui的方法进行行内嵌套显示,让一行可以显示更多的东西,让一行显示JSON的字符串、从表之类的东西。
下边先看效果图:
接下来说实现过程:
(1)在首次加载中添加代码
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:'datagrid22_getdetail.php?itemid='+row.itemid,//从表的查询
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'orderid',title:'Order ID',width:100},
{field:'quantity',title:'Quantity',width:100},
{field:'unitprice',title:'Unit Price',width:100}
]],
onResize:function(){ $('#orderList').datagrid('fixDetailRowHeight', index);
},//调节高度
onLoadSuccess:function(){
setTimeout(function(){ $('#orderList').datagrid('fixDetailRowHeight', index);
},0);
}
}); $('#orderList').datagrid('fixDetailRowHeight', index);
}
});
因为我是做了显示排序翻页的,所以放在了他们下边。如果没有,那么就放在你显示的字段下边就好了。
要显示的字段也写在上边就可以。
当用户点击展开按钮(’+’)时,将会触发“onExpandRow”事件。我们用树列创建一个新的子网格。当subgrid加载数据成功或调整大小时,请记住为master datagrid调用’fixDetailRowHeight’方法。
(2)如果前台报找不到detailview,那你需要在easyui中添加一个方法,我会放到我的资源下载中。由于要的可以下载。
(3)引用这个文件时记得放在这个引用下边
最后这个操作借鉴了一下引导,感谢作者。