EXtjsgrid合并列行

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

转载最新推荐文章于 2023-04-24 22:51:51 发布 · 978 阅读

extjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在表格中合并相同内容单元格的方法，通过JavaScript实现自动合并功能，提高表格展示效率。文章详细解释了如何遍历表格行与列，对比单元格内容，并对连续相同的单元格进行合并。

/**
* 合并单元格
* @param {} grid 要合并单元格的grid对象
* @param {} cols 要合并哪几列 [1,2,4]
*/
function mergeCells(grid, cols) {
var arrayTr = document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChild.getElementsByTagName('tr');
//var arrayTr = document.getElementById(grid.getId()+"-body").firstChild.nextSibling;
//var arrayTr = Ext.get(grid.getId()+"-body").first().first().first().select("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 != 1) {
     var leftDisplay=arrayTd[col-2].style.display;//判断左边单元格值是否已display
     if(leftDisplay == 'none') addf();
     else mergef();
    } else addf();
   } else mergef();
    }
  }
});
};