闫士佳的第一篇博客——subgrid

来源：互联网发布：淘宝流量统计工具编辑：程序博客网时间：2024/06/16 10:00

今天做后台时遇到dategrid下面还需要嵌套一个dategrid情况，在网上借鉴了很多人的博客，最终做出来样子是这样的这里写图片描述
以下是body里面的代码

<table id="dg" style="width:700px;height:250px"        url=""        title="经销商管理"        singleSelect="true"         fitColumns="true"        rownumbers="true"           fitColumns="true"           fit="true"                  nowrap="false"        striped="true"        singleSelect="true"        >        <thead>        <tr>                 <th field="sellername" align=left" width="100">经销商名称</th>            <th field="contacts" align="left" width="100">联系人</th>            <th field="tel" align="left" width="100">联系方式</th>        </tr>    </thead></table>

以下是javascript里面代码

<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>//主体信息表格        <script  type="text/javascript">    $(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:'',  //                         fitColumns:true,                    singleSelect:true,                    rownumbers:true,                    loadMsg:'加载中...',                    height:'auto',                    columns:[[                        {field:'categoryname',title:'授权代理品规',width:100},                        {field:'district',title:'授权经营范围',width:100},                        {field:'cutofftime',title:'授权截止日期',width:100}                    ]],                    onResize:function(){                        $('#dg').datagrid('fixDetailRowHeight',index);                    },                    onLoadSuccess:function(){                        setTimeout(function(){                            $('#dg').datagrid('fixDetailRowHeight',index);                        },0);                    }                });                $('#dg').datagrid('fixDetailRowHeight',index);            }        });    })    </script>

下面是官网地址，没看懂的朋友可以去官网看看
http://www.jeasyui.com/tutorial/datagrid/datagrid22.php

1 0