easyui datagrid detailview(subgrid)一些用法介绍

最近在做一个web的项目，因为第一次接触，好多东西都是通过度娘一步一步搞出来的。

现在做一些总结希望给有需要的人做参考

先看效果图（因涉及公司项目部分打码请见谅）：

首先主表实现代码如下：

  <div id="ID_PANEL_PAAS" class="easyui-panel" closed='true'>
        <table 
            id="ID_PAAS_ENVIRONMENT"
            class="easyui-datagrid" 
            loadMsg="Loading ... "
            singleSelect="true"
            fitColumns="true"
            rownumbers="true"
            data-options="
                    pagination:true,
                    pageSize:20,
                    pageList:[20,40,80,100],
                    toolbar:[{
                    text:'申请XX',
                    iconCls:'icon-add',
                    handler:showCreateEnvironmentDlg},'-',{
                    text:'删除XX',
                    iconCls:'icon-cut',
                    handler:removeEnvironment},'-',{
                    text:'前往IAAS环境',
                    iconCls:'icon-back',
                    handler:selectEnvironmentType}]">
            <thead>
                <tr>
                    <th field="InstanceName" width="12%">实例名称</th>
                    <th field="Ne" width="10%">网络</th>
                    <th field="Bureauid" width="10%">局号</th>
                    <th field="Vmanageaddr" width="20%">VMAddress</th>
                    <th field="Blueprint" width="20%">蓝图包</th>
                    <!--<th field="EnvId" width="20%">EnvId</th>-->
                     <th field="EnvId" width="20%" hidden="true">EnvId</th>
                    <th field="Status" width="10%">状态</th>
                    <th field="Log" width="7%" hidden="true">查看日志</th>
                </tr>
            </thead>
        </table>
    </div>

上面红色是隐藏哪一列的属性，这个在调试过程中还是蛮实用的，因为功能做出来以后部分列可能不需要，就可以通过增加这个属性来调整

subgrid的实现如下：

function showPaasPcInfo(){
               $('#ID_PAAS_ENVIRONMENT').datagrid({
                    view: detailview,
                    detailFormatter:function(index,row){
                        //return '<div style="padding:2px;text-align: left;"> <button onClick="createVirtualPC()">申请虚机</button><button onClick="removeVirtualPC()">删除虚机</button><table class="ddv"></table></div>';
                        return '<div style="padding:2px;text-align: left;"><table class="ddv"></table></div>';
                    },
                    onExpandRow: function(index,row){
                        g_envid = row.EnvId;
                        var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                        ddv.datagrid({
                            //url:'/uncpc?request=Show&bureauid='+row.Bureauid+'&ne='+row.Ne+'&uname='+{{.uname}},
                            url:'/vtestnode?request=ShowPC&envid='+row.EnvId,
                            method:'GET',
                            fitColumns:true,
                            rownumbers:true,
                            singleSelect:true,
                            loadMsg:'',
                            height:'auto',
                            columns:[[
                                {field:'Index',title:'Index',width:5,hidden:true},
                                {field:'Id',title:'PcId',width:10,hidden:true},
                                {field:'Name',title:'实例名称',width:10,},
                                {field:'Role',title:'Role',width:10,hidden:true},
                                {field:'Ip',title:'IP',width:20},
                            ]],
                            onClickRow: function (index, row) {
                                setSelectValue(row);
                                //$("#ID_PAAS_ENVIRONMENT").datagrid('hideColumn', 'Index');
                                g_row = row;
                            },
                            onResize:function(){
                                $('#ID_PAAS_ENVIRONMENT').datagrid('fixDetailRowHeight',index);
                            },
                            onLoadSuccess:function(){
                                setTimeout(function(){
                                    $('#ID_PAAS_ENVIRONMENT').datagrid('fixDetailRowHeight',index);
                                },0);
                            },
                            toolbar: [
                            {text:'申请虚机',iconCls:'icon-add',handler: function(){ 
                                   createVirtualPC(); 
                                } 
                            },'-',
                            // {text:'修改用户信息', iconCls: 'icon-edit', handler: function(){ 
                            //     updateCustomer(); 
                            //     } 
                            // },'-',
                            {text:'删除虚机',iconCls:'icon-cut',handler: function(){ 
                                    removeVirtualPC(g_row); 
                                } 
                            }] 
                        });
                        $('#ID_PAAS_ENVIRONMENT').datagrid('fixDetailRowHeight',index);
                    }
                });
            }

第二个是动态生成的，其实这种做法，我感觉不是太满意，不过因为前面已经这样做了，项目又紧急，暂时就这么改吧。

onClickRow: function (index, row)  这个事件可以直接获取点击的subgrid 的 当前点击的行，可以设置一个全局变量，获取row 然后对row进行操作

目前我没找到其他获取子行数据的方法，暂时可以用这个替代。

同时这个里面也含有隐藏属性，

刚开始子表里面的表头按钮，不会用，就使用的button，被注释的代码行，后来，终于搜到类似的例子了，就修改了下。

ps:

查看后面的放大镜做法：

这个是在后台返回数据的时候，直接给返回的字段增加如下代码 （这个也可以前台做）

webEnvInfo.Log = `<input type="image" src="/images/search.png" οnclick="showLogDialog()"/>`