Extjs gridpanel 合并单元格

/*
* *合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：
* *store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
* *参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空
*/
function gridSpan(grid, rowOrCol, cols, sepCol){
// alert('grid===='+grid+';rowOrCol='+rowOrCol+';cols='+cols);
var array1 = new Array();
var arraySep = new Array();
var count1 = 0;
var count2 = 0;
var index1 = 0;
var index2 = 0;
var aRow = undefined;
var preValue = undefined;
var firstSameCell = 0;
var allRecs = grid.getStore().getRange();
if(rowOrCol == "row"){
count1 = grid.getColumnModel().getColumnCount(); //列数
count2 = grid.getStore().getCount(); //行数(纪录数)
} else {
count1 = grid.getStore().getCount();
count2 = grid.getColumnModel().getColumnCount();
}
for(i = 0; i < count1; i++){
if(rowOrCol == "row"){
var curColName = grid.getColumnModel().getDataIndex(i); //列名
var curCol = "[" + curColName + "]";
if(cols.indexOf(curCol) < 0)
continue;
} preValue = undefined;
firstSameCell = 0;
array1[i] = new Array();
for(j = 0; j < count2; j++){ if(rowOrCol == "row"){
index1 = j;
index2 = i;
} else {
index1 = i;
index2 = j;
}
var colName = grid.getColumnModel().getDataIndex(index2);
if(sepCol && colName == sepCol)
arraySep[index1] = allRecs[index1].get(sepCol);
var seqOldValue = seqCurValue = "1";
if(sepCol && index1 > 0){
seqOldValue = arraySep[index1 - 1];
seqCurValue = arraySep[index1];
} if(allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)){
//alert(colName + "======" + seqOldValue + "======" + seqCurValue);
allRecs[index1].set(colName, "");
array1[i].push(j);
if(j == count2 - 1){
var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
if(rowOrCol == "row"){
allRecs[index].set(colName, preValue);
} else {
allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
}
}
} else {
if(j != 0){
var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
if(rowOrCol == "row"){
allRecs[index].set(colName, preValue);
} else {
allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
}
}
firstSameCell = j;
preValue = allRecs[index1].get(colName);
allRecs[index1].set(colName, "");
if(j == count2 - 1){
allRecs[index1].set(colName, preValue);
}
} }
}
grid.getStore().commitChanges(); // 添加所有分隔线
var rCount = grid.getStore().getCount();
for(i = 0; i < rCount; i ++){
hRow = grid.getView().getRows()[i];
hRow.style.border = "none";
//hRow.style.borderBottom= "none";
for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){
aRow = grid.getView().getCell(i,j);
aRow.style.margin="0";
aRow.style.padding="0"; if(i == 0){
aRow.style.borderTop = "none";
aRow.style.borderLeft = "1px solid #8db2e3"; }else if(i == rCount - 1){
aRow.style.borderTop = "1px solid #8db2e3";
aRow.style.borderLeft = "1px solid #8db2e3";
aRow.style.borderBottom = "1px solid #8db2e3";
}else{
aRow.style.borderTop = "1px solid #8db2e3";
aRow.style.borderLeft = "1px solid #8db2e3";
}
if(j == grid.getColumnModel().getColumnCount()-1)
aRow.style.borderRight = "1px solid #8db2e3";
if(i == rCount-1)
aRow.style.borderBottom = "1px solid #8db2e3";
}
}
// 去除合并的单元格的分隔线
for(i = 0; i < array1.length; i++){
if(!Ext.isEmpty(array1[i])){
for(j = 0; j < array1[i].length; j++){
if(rowOrCol == "row"){
aRow = grid.getView().getCell(array1[i][j],i);
aRow.style.borderTop = "none"; } else {
aRow = grid.getView().getCell(i, array1[i][j]);
aRow.style.borderLeft = "none";
}
}
}
} for(i = 0; i < count1; i++){
if(rowOrCol == "row"){
var curColName = grid.getColumnModel().getDataIndex(i); //列名
var curCol = "[" + curColName + "]";
if(cols.indexOf(curCol) < 0)
continue;
} for(j = 0; j < count2; j++){
var hbcell = grid.getView().getCell(j,i);
hbcell.style.background="#FFF"; //改变合并列所有单元格背景为白色
}
} };

this.gridPanel = new HT.GridPanel({
region : 'center',
tbar : this.topbar,
border:true,
// hideBorders:true,
columnLines:false,
// bodyBorder :false,
// 使用RowActions
rowActions : true,
id : 'PageGrid',
url : __ctxPath + "/qywz/listPage.do",
fields : [ {
name : 'id',
type : 'int'
}, 'name', 'contant', 'edituserid', 'editdate', 'createdate',
'isenabled', 'navigationMenuId' ],
columns : [ {
header : 'id',
dataIndex : 'id',
hidden : true
}, {
header : '页面名称',
dataIndex : 'name'
}, {
header : '内容',
dataIndex : 'contant'
}, {
header : '编辑人',
dataIndex : 'edituserid'
}, {
header : '编辑日期',
dataIndex : 'editdate'
}, {
header : '生成日期',
dataIndex : 'createdate'
}, {
header : '有效标志',
dataIndex : 'isenabled'
}, {
header : '对应导航菜单表ID',
dataIndex : 'navigationMenuId'
}, new Ext.ux.grid.RowActions({
header : '管理',
width : 100,
actions : [ {
iconCls : 'btn-del',
qtip : '删除',
style : 'margin:0 3px 0 3px'
}, {
iconCls : 'btn-edit',
qtip : '编辑',
style : 'margin:0 3px 0 3px'
} ],
listeners : {
scope : this,
'action' : this.onRowAction
}
}) ]
// end of columns
});
var gridp = this.gridPanel; this.gridPanel.addListener('rowdblclick', this.rowClick); // ==>监听load , 执行合并单元格
this.gridPanel.getStore().on('load', function () {
gridSpan(gridp,"row","[name],[contant]"); });