1. The CSS style of the merged cell
.x-grid3-row td, .x-grid3-summary-row td{
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.x-grid3-row {
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
}
.rowspan-grid .x-grid3-body .x-grid3-row {
border:none;
cursor:default;
width:100%;
}
.rowspan-grid .x-grid3-header .x-grid3-cell{
border-left: 2px solid #fff;
}
.rowspan-grid .x-grid3-body .x-grid3-row{
overflow: hidden;
border-right: 1px solid #ccc;
}
.rowspan-grid .x-grid3-body .x-grid3-cell {
border: 1px solid #ccc;
border-top:none;
border-right:none;
}
.rowspan-grid .x-grid3-body .x-grid3-cell-first {
border-left: 1px solid #fff;
}
.rowspan-grid .x-grid3-body .rowspan-unborder {
border-bottoRowspanView.js
}
.rowspan-grid .x-grid3-body .rowspan {
border-bottom: 1px solid #ccc;
}
.x-grid3-hd .ux-grid-hd-nogroup-cell .x-grid3-td-1-0{
width:30px;
}
2. When data is loaded
store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
3. Introduce js
/*
**The function for merging cells, which merges all consecutive cells with the same value in the table. Example of calling method:
**store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate] ","FbillNumber");});
**parameters: grid - the table to be merged, rowOrCol - the row or column to be merged, cols - the column to be merged (valid when rows are merged), which column is used to split sepCols (ie This field does not merge 2 rows, and other fields are not allowed to merge), the default is empty
*/
function gridSpan(grid, rowOrCol, cols, sepCol){
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 ++){
for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){
aRow = grid.getView().getCell(i,j);
if(i == 0){
aRow.style.borderTop = "none";
aRow.style.borderLeft = "1px solid #ccc";
}else if(i == rCount - 1){
aRow.style.borderTop = "1px solid #ccc";
aRow.style.borderLeft = "1px solid #ccc";
aRow.style.borderBottom = "1px solid #ccc";
}else{
aRow.style.borderTop = "1px solid #ccc";
aRow.style.borderLeft = "1px solid #ccc";
}
if(j == grid.getColumnModel().getColumnCount()-1)
aRow.style.borderRight = "1px solid #ccc";
if(i == rCount-1)
aRow.style.borderBottom = "1px solid #ccc";
}
}
//去除合并的单元格的分隔线
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";
}
}
}
}
}