1 /* 2 * *合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例： 3 * *store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");}); 4 * *参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空 5 */ 6 function gridSpan(grid, rowOrCol, cols, sepCol){ 7 // alert('grid===='+grid+';rowOrCol='+rowOrCol+';cols='+cols); 8 var array1 = new Array(); 9 var arraySep = new Array(); 10 var count1 = 0; 11 var count2 = 0; 12 var index1 = 0; 13 var index2 = 0; 14 var aRow = undefined; 15 var preValue = undefined; 16 var firstSameCell = 0; 17 var allRecs = grid.getStore().getRange(); 18 if(rowOrCol == "row"){ 19 count1 = grid.getColumnModel().getColumnCount(); //列数 20 count2 = grid.getStore().getCount(); //行数(纪录数) 21 } else { 22 count1 = grid.getStore().getCount(); 23 count2 = grid.getColumnModel().getColumnCount(); 24 } 25 for(i = 0; i < count1; i++){ 26 if(rowOrCol == "row"){ 27 var curColName = grid.getColumnModel().getDataIndex(i); //列名 28 var curCol = "[" + curColName + "]"; 29 if(cols.indexOf(curCol) < 0) 30 continue; 31 } 32 33 34 preValue = undefined; 35 firstSameCell = 0; 36 array1[i] = new Array(); 37 for(j = 0; j < count2; j++){ 38 39 if(rowOrCol == "row"){ 40 index1 = j; 41 index2 = i; 42 } else { 43 index1 = i; 44 index2 = j; 45 } 46 var colName = grid.getColumnModel().getDataIndex(index2); 47 if(sepCol && colName == sepCol) 48 arraySep[index1] = allRecs[index1].get(sepCol); 49 var seqOldValue = seqCurValue = "1"; 50 if(sepCol && index1 > 0){ 51 seqOldValue = arraySep[index1 - 1]; 52 seqCurValue = arraySep[index1]; 53 } 54 55 if(allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)){ 56 //alert(colName + "======" + seqOldValue + "======" + seqCurValue); 57 allRecs[index1].set(colName, ""); 58 array1[i].push(j); 59 if(j == count2 - 1){ 60 var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1); 61 if(rowOrCol == "row"){ 62 allRecs[index].set(colName, preValue); 63 } else { 64 allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue); 65 } 66 } 67 } else { 68 if(j != 0){ 69 var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1); 70 if(rowOrCol == "row"){ 71 allRecs[index].set(colName, preValue); 72 } else { 73 allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue); 74 } 75 } 76 firstSameCell = j; 77 preValue = allRecs[index1].get(colName); 78 allRecs[index1].set(colName, ""); 79 if(j == count2 - 1){ 80 allRecs[index1].set(colName, preValue); 81 } 82 } 83 84 } 85 } 86 grid.getStore().commitChanges(); 87 88 // 添加所有分隔线 89 var rCount = grid.getStore().getCount(); 90 for(i = 0; i < rCount; i ++){ 91 hRow = grid.getView().getRows()[i]; 92 hRow.style.border = "none"; 93 //hRow.style.borderBottom= "none"; 94 for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){ 95 aRow = grid.getView().getCell(i,j); 96 aRow.style.margin="0"; 97 aRow.style.padding="0"; 98 99 if(i == 0){ 100 aRow.style.borderTop = "none"; 101 aRow.style.borderLeft = "1px solid #8db2e3"; 102 103 }else if(i == rCount - 1){ 104 aRow.style.borderTop = "1px solid #8db2e3"; 105 aRow.style.borderLeft = "1px solid #8db2e3"; 106 aRow.style.borderBottom = "1px solid #8db2e3"; 107 }else{ 108 aRow.style.borderTop = "1px solid #8db2e3"; 109 aRow.style.borderLeft = "1px solid #8db2e3"; 110 } 111 if(j == grid.getColumnModel().getColumnCount()-1) 112 aRow.style.borderRight = "1px solid #8db2e3"; 113 if(i == rCount-1) 114 aRow.style.borderBottom = "1px solid #8db2e3"; 115 } 116 } 117 // 去除合并的单元格的分隔线 118 for(i = 0; i < array1.length; i++){ 119 if(!Ext.isEmpty(array1[i])){ 120 for(j = 0; j < array1[i].length; j++){ 121 if(rowOrCol == "row"){ 122 aRow = grid.getView().getCell(array1[i][j],i); 123 aRow.style.borderTop = "none"; 124 125 } else { 126 aRow = grid.getView().getCell(i, array1[i][j]); 127 aRow.style.borderLeft = "none"; 128 } 129 } 130 } 131 } 132 133 for(i = 0; i < count1; i++){ 134 if(rowOrCol == "row"){ 135 var curColName = grid.getColumnModel().getDataIndex(i); //列名 136 var curCol = "[" + curColName + "]"; 137 if(cols.indexOf(curCol) < 0) 138 continue; 139 } 140 141 for(j = 0; j < count2; j++){ 142 var hbcell = grid.getView().getCell(j,i); 143 hbcell.style.background="#FFF"; //改变合并列所有单元格背景为白色 144 } 145 } 146 147 };
使用方法示例:
1 this.gridPanel = new HT.GridPanel({ 2 region : 'center', 3 tbar : this.topbar, 4 border:true, 5 // hideBorders:true, 6 columnLines:false, 7 // bodyBorder :false, 8 // 使用RowActions 9 rowActions : true, 10 id : 'PageGrid', 11 url : __ctxPath + "/qywz/listPage.do", 12 fields : [ { 13 name : 'id', 14 type : 'int' 15 }, 'name', 'contant', 'edituserid', 'editdate', 'createdate', 16 'isenabled', 'navigationMenuId' ], 17 columns : [ { 18 header : 'id', 19 dataIndex : 'id', 20 hidden : true 21 }, { 22 header : '页面名称', 23 dataIndex : 'name' 24 }, { 25 header : '内容', 26 dataIndex : 'contant' 27 }, { 28 header : '编辑人', 29 dataIndex : 'edituserid' 30 }, { 31 header : '编辑日期', 32 dataIndex : 'editdate' 33 }, { 34 header : '生成日期', 35 dataIndex : 'createdate' 36 }, { 37 header : '有效标志', 38 dataIndex : 'isenabled' 39 }, { 40 header : '对应导航菜单表ID', 41 dataIndex : 'navigationMenuId' 42 }, new Ext.ux.grid.RowActions({ 43 header : '管理', 44 width : 100, 45 actions : [ { 46 iconCls : 'btn-del', 47 qtip : '删除', 48 style : 'margin:0 3px 0 3px' 49 }, { 50 iconCls : 'btn-edit', 51 qtip : '编辑', 52 style : 'margin:0 3px 0 3px' 53 } ], 54 listeners : { 55 scope : this, 56 'action' : this.onRowAction 57 } 58 }) ] 59 // end of columns 60 }); 61 var gridp = this.gridPanel; 62 63 this.gridPanel.addListener('rowdblclick', this.rowClick); 64 65 // ==>监听load , 执行合并单元格 66 this.gridPanel.getStore().on('load', function () { 67 gridSpan(gridp,"row","[name],[contant]"); 68 69 });