easyui dataguid subgrid 子表

用easyui 的dataguid打造的界面，主要是学习了subgrid的试水，挺好用的 

下面是js,  关键的一段，主要是要注意view: detailview下面开始的就是子表的一段，页面我就不给了，很简单的，有<table id="data_result"></table>就行了，不过一定要引入

datagrid-detailview.js ，点击小“+”会触发onExpandRow，接下来的就好理解了，$('#data_result').datagrid('fixDetailRowHeight',index); 这个很重要，是用来保持弹出的子表高度和

附表的行数高度一致，否则表格会变形覆盖

$(document).ready(function() {
    $("#data_result").datagrid({
         url:'',
         method:'post',
         loadMsg:"数据装载中....",
         fitColumns:true,
         nowrap:false,
         striped: true,
         singleSelect:true,
         pagination:true,
         pageSize:5,
         pageList:[5,10,20],
         columns:[[
                   {title:'表          名',field:'tableName',width:120},    
                   {title:'操作数据',field:'tableData',width:500,
                       formatter:function(value,rowData){                           
                           var arr = value.split(",");
                           if(arr.length>2){
                               for(i=0;i<arr.length;i++){
                                   if(i%4==0){
                                       arr[i] = '<tr><td width="33%">'+arr[i]+'</td>';
                                   }
                                   else if((i+1)%4==0){
                                       arr[i] = '<td width="33%">'+arr[i]+'</td></tr>';
                                   }
                                   else{
                                       arr[i] = '<td width="33%">'+arr[i]+'</td>';
                                   }
                               }
                               }
                           value = arr.join();
                           value = '<table width="100%">' + value + '</table>';
                           var reg = /(\[\{)|(\}\])|(,)/g; 
                           value = value.replace(reg, "");
                           return value;
                        }
                   },
                   {title:'操作时间',field:'createDate',width:120},
                   {title:'操作用户',field:'userId',width:120},
                   {title:'操作用户',field:'occurrenceTime',width:120,hidden:true}
                   ]],
        view: detailview,  
        detailFormatter:function(index,row){  
            return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';  
        },  
        onExpandRow: function(index,row){  
            $('#ddv-'+index).datagrid({  
                url:'findActionLog.action?daoLog.userId='+row.userId+'&daoLog.occurrenceTime='+row.occurrenceTime,  
                fitColumns:true,  
                singleSelect:true,  
                rownumbers:true,  
                loadMsg:'',  
                height:'auto',  
                columns:[[  
                {title:'日志编号',field:'id',width:50},
                {title:'系统名称',field:'subSystem',width:50},
                {title:'应用名称',field:'businessName',width:50},
                {title:'客户端IP',field:'clientIP',width:30}
                ]],  
                onResize:function(){  
                    $('#data_result').datagrid('fixDetailRowHeight',index);  
                },  
                onLoadSuccess:function(){  
                    setTimeout(function(){  
                        $('#data_result').datagrid('fixDetailRowHeight',index);  
                    },0);  
                }  
            });  
            $('#data_result').datagrid('fixDetailRowHeight',index);  
        }  
     });

 

下面是截图