首页 > 代码库 > datagrid进阶——subGrid讲解

datagrid进阶——subGrid讲解

2024-07-25 16:16:16   218人阅读

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);
                        },
                        onl oadSuccess: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又有什么区别呢？

datagrid进阶——subGrid讲解


联系
我们