datagrid进阶——subGrid讲解

àì夳堔傛蜴生んèń 2022-08-13 00:41 281阅读 0赞

subGrid，也就是datagrid中再套一层datagrid，比较适合用于显示一些带有层次的数据，比如要显示一批订单，订单包含具体的货物。这样一个需求，就可以用到subGrid。

我们可以先看看官网上subGrid的样子来增强一下视觉上的感觉。

![20141005150845500][]

如何来实现呢？若只是用来显示一下数据，其实还是简单的。

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

[20141005150845500]: /images/20220810/663d5825c5f843b7b969f2d7f6e638d5.png