subGrid,也就是datagrid中再套一层datagrid,比较适合用于显示一些带有层次的数据,比如要显示一批订单,订单包含具体的货物。这样一个需求,就可以用到subGrid。
我们可以先看看官网上subGrid的样子来增强一下视觉上的感觉。
如何来实现呢?若只是用来显示一下数据,其实还是简单的。
看看demo的代码量也不过区区几十行,跟上思路很容易就可以理解了。
$(function(){
$('#dg').datagrid({
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:200},
{field:'quantity',title:'Quantity',width:100,align:'right'},
{field:'unitprice',title:'Unit Price',width:100,align:'right'}
]],
onResize:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
1、使用这个subGrid的视图,需要使用到官网提供的datagrid-detailview.js,其中帮我们定义好了detailView这种显示视图。
在使用过程中,我们只需要在主datagrid中将默认的view用detailView替换掉就可以了。
2、detailFormatter,也就是生成的detail中的初始代码,这里放入一个table,之后可以将其动态创建成datagrid。
3、当主datagrid刚刚初始化完成时,并不显示subGrid,此时subGrid并没有存在的必要,我们也不去创建它。
那什么时候去创建它呢?当我们展开主datagrid中的某条数据的时候,也就是在onExpandRow事件中,才去创建一个它“管辖”的subGrid。
4、创建subGrid的方法和一般创建datagrid的方式差不多,但是后面多了一些fixDetailRowHeight的操作
fixDetailRowHeight这个方法主要是为了调整subGrid的高度用的,如若不加,可能会造成subGrid的高度会出现错位的情况。
不过这里setTimeout的时间为0,那和直接调用function又有什么区别呢?