Extjs Grid合并单元格

最新推荐文章于 2023-04-24 22:51:51 发布

Zmin0707

最新推荐文章于 2023-04-24 22:51:51 发布

阅读量2.4k

点赞数 1

分类专栏： extjs 文章标签： extjs

extjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

客户需求需要将grid 中的数据进行合并单元格处理！公司程序用的是extjs3.X 的代码底层生成的html 代码不是标准的table 代码，所以合并单元格只能另辟蹊径！以下是在网上找的extjs3 和 extjs4 的合并单元方法！

/**

* 解决ExtJs4.1合并单元格问题
* @param {} grid 要合并单元格的grid对象
* @param {} cols 要合并哪几列 [1,2,4]
*/
var mergeCells = function(grid,cols){
var arrayTr=document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChild.getElementsByTagName('tr');
var trCount = arrayTr.length;
var arrayTd;
var td;
var merge = function(rowspanObj,removeObjs){ //定义合并函数
if(rowspanObj.rowspan != 1){
arrayTd =arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行
td=arrayTd[rowspanObj.td-1];
td.rowSpan=rowspanObj.rowspan;
td.vAlign="middle";
Ext.each(removeObjs,function(obj){ //隐身被合并的单元格
arrayTd =arrayTr[obj.tr].getElementsByTagName("td");
arrayTd[obj.td-1].style.display='none';
});
}
};
var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}
var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]
var col;
Ext.each(cols,function(colIndex){ //逐列去操作tr
var rowspan = 1;
var divHtml = null;//单元格内的数值
for(var i=1;i<trCount;i++){ //i=0表示表头等没用的行
arrayTd = arrayTr[i].getElementsByTagName("td");
var cold=0;
// Ext.each(arrayTd,function(Td){ //获取RowNumber列和check列
// if(Td.getAttribute("class").indexOf("x-grid-cell-special") != -1)
// cold++;
// });
col=colIndex+cold;//跳过RowNumber列和check列
if(!divHtml){
divHtml = arrayTd[col-1].innerHTML;
rowspanObj = {tr:i,td:col,rowspan:rowspan}
}else{
var cellText = arrayTd[col-1].innerHTML;
var addf=function(){
rowspanObj["rowspan"] = rowspanObj["rowspan"]+1;
removeObjs.push({tr:i,td:col});
if(i==trCount-1)
merge(rowspanObj,removeObjs);//执行合并函数
};
var mergef=function(){
merge(rowspanObj,removeObjs);//执行合并函数
divHtml = cellText;
rowspanObj = {tr:i,td:col,rowspan:rowspan}
removeObjs = [];
};
if(cellText == divHtml){
if(colIndex!=cols[0]){
var leftDisplay=arrayTd[col-2].style.display;//判断左边单元格值是否已display
if(leftDisplay=='none')
addf();
else
mergef();
}else
addf();
}else
mergef();
}
}
});
};

/*
**extjs 3.3 合并单元格
**合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：
**store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
**参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空
*/
Ext.grid.GridPanel.prototype.gridSpan=function(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";
}
}
}
}
var view=grid.getView();
var rows=view.getRows();
for(i = 0; i < rows.length; i++){
var cls= Ext.get(rows[i]).dom;
cls.style.borderBottomWidth="0";
//cls.removeClass("x-grid3-row");//去掉原来的样式
//cls.addClass("my-x-grid3-row");//加上自己的样式
}
};