datagrid进阶——subGrid讲解

来源：互联网发布：mac 您没有必要的权限编辑：程序博客网时间：2024/06/09 10:53

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又有什么区别呢？

22 0