easyui dataguid subgrid 子表

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

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

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

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

 1 $(document).ready(function() {
 2     $("#data_result").datagrid({
 3          url:'',
 4          method:'post',
 5          loadMsg:"数据装载中....",
 6          fitColumns:true,
 7          nowrap:false,
 8          striped: true,
 9          singleSelect:true,
10          pagination:true,
11          pageSize:5,
12          pageList:[5,10,20],
13          columns:[[
14                    {title:'表          名',field:'tableName',width:120},    
15                    {title:'操作数据',field:'tableData',width:500,
16                        formatter:function(value,rowData){                           
17                            var arr = value.split(",");
18                            if(arr.length>2){
19                                for(i=0;i<arr.length;i++){
20                                    if(i%4==0){
21                                        arr[i] = '<tr><td width="33%">'+arr[i]+'</td>';
22                                    }
23                                    else if((i+1)%4==0){
24                                        arr[i] = '<td width="33%">'+arr[i]+'</td></tr>';
25                                    }
26                                    else{
27                                        arr[i] = '<td width="33%">'+arr[i]+'</td>';
28                                    }
29                                }
30                                }
31                            value = arr.join();
32                            value = '<table width="100%">' + value + '</table>';
33                            var reg = /(\[\{)|(\}\])|(,)/g; 
34                            value = value.replace(reg, "");
35                            return value;
36                         }
37                    },
38                    {title:'操作时间',field:'createDate',width:120},
39                    {title:'操作用户',field:'userId',width:120},
40                    {title:'操作用户',field:'occurrenceTime',width:120,hidden:true}
41                    ]],
42         view: detailview,  
43         detailFormatter:function(index,row){  
44             return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';  
45         },  
46         onExpandRow: function(index,row){  
47             $('#ddv-'+index).datagrid({  
48                 url:'findActionLog.action?daoLog.userId='+row.userId+'&daoLog.occurrenceTime='+row.occurrenceTime,  
49                 fitColumns:true,  
50                 singleSelect:true,  
51                 rownumbers:true,  
52                 loadMsg:'',  
53                 height:'auto',  
54                 columns:[[  
55                 {title:'日志编号',field:'id',width:50},
56                 {title:'系统名称',field:'subSystem',width:50},
57                 {title:'应用名称',field:'businessName',width:50},
58                 {title:'客户端IP',field:'clientIP',width:30}
59                 ]],  
60                 onResize:function(){  
61                     $('#data_result').datagrid('fixDetailRowHeight',index);  
62                 },  
63                 onLoadSuccess:function(){  
64                     setTimeout(function(){  
65                         $('#data_result').datagrid('fixDetailRowHeight',index);  
66                     },0);  
67                 }  
68             });  
69             $('#data_result').datagrid('fixDetailRowHeight',index);  
70         }  
71      });

 

下面是截图

 

posted @ 2012-08-22 16:17  cocohxq  阅读(3504)  评论(10)  编辑  收藏  举报