Extjs合并单元格

原创于 2025-06-06 08:43:31 发布 · 361 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

关于Extjs合并单元格，这边写了两种合并的模式，具体效果也会进行展示

前台展示原始数据：

列名1	列名2	列名3	列名4
11111	a2	a3	f4
11111	b2	b3	f4
22222	c2	c3	f4
22222	d2	d3	f4

模式一：

模式一代码：

//grid表示表单，cols表示需要那几列进行合并,是一个数组，例子中传参[1,4]
function mergeCell(grid,cols){
    var rows = grid.getView().el.query('.x-grid-row');
    var prevValue = null;
    var prevCell = null;
    var rowspan = 1;
    //合并那些列
    Ext.each(cols , function(colIndex){
        //逐列去操作tr
        Ext.Array.forEach(rows , function(row , rowIndex){
            var rowCell = row.getElementsByTagName('td');
            var value = rowCell[colIndex].innerHTML;
            if (value === prevValue){
                rowspan++;
                prevCell.setAttribute('rowspan',rowspan);
                rowCell[colIndex].style.display = 'none';
            }else{
                rowspan = 1;
                prevValue = value;
                prevCell = rowCell[colIndex];
            }
            //垂直居中
            prevCell.style.verticalAlign = 'middle';
        })
    })
}

效果展示如下：

列名1	列名2	列名3	列名4
11111	a2	a3	f4
11111	b2	b3
22222	c2	c3
22222	d2	d3

模式二

模式二代码：

//grid表示表单，cols表示需要那几列进行合并,是一个数组，例子中传参[1,4]
function mergeCell(grid,cols){
    var rows = grid.getView().el.query('.x-grid-row');
    var prevValue = [];
    var prevCell = [];
    var rowspan = 1;
    //逐列去操作tr
    Ext.Array.forEach(rows , function(row , rowIndex){
        var rowCell = row.getElementsByTagName('td');
        var ifMergeCell = true;
        Ext.each(cols , function(colIndex){
            if(prevValue.length === 0){
                ifMergeCell = false;
            }else{
                var value = rowCell[colIndex].innerHTML;
                var prevValueCell = prevValue[colIndex];
                if((value !== prevValueCell) && ifMergeCell){
                    ifMergeCell = false;
                }
            }
        });
        if(ifMergeCell){
            rowspan++;
            Ext.each(cols , function(colIndex){
                prevCell[colIndex].setAttribute('rowspan',rowspan);
                rowCell[colIndex].style.display = 'none';
            });
        }else{
            rowspan = 1;
            Ext.each(cols , function(colIndex){
                prevCell[colIndex] = rowCell[colIndex].innerHTML;
                prevCell[colIndex] = = rowCell[colIndex];
            });
        }
        Ext.each(cols , function(colIndex){
            //垂直居中
            prevCell[colIndex].style.verticalAlign = 'middle';
        });
    })
}