用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 });
下面是截圖
