extjs4 grid合并列和合并行

最新推荐文章于 2025-06-06 08:43:31 发布

原创

最新推荐文章于 2025-06-06 08:43:31 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4

本文介绍了如何在 ExtJS4 中实现网格（Grid）的列合并和行合并功能。作者通过自己的实践，从理解 HTML 表格的行列合并原理出发，详细解析了在 ExtJS4 中实现这一功能的简洁方法。经过调整，作者不仅优化了列合并，还简化了行合并的代码，使得合并操作更加灵活，适用于各种复杂场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

惯例先吐槽：之前用过几次grid合并行的功能，都是直接在网上找的代码复制使用，功能实现了就是一直没理解很复杂。今天要用到grid合并列的功能，网上找了几遍没找到代码，无奈之下决定参考合并行的方法写个合并列的，在不断调式的过程中终于明白了那个方法的思路，然后发现合并列原来简单多了，于是顺顺利利地写出了合并列的方法，越看越满意，如此简洁易懂啊，于是决定改改合并行的方法了，这一改就发现原来合并行也是一样的简单啊，最后就写出了简洁版的合并行、合并列。二者可以合二为一，但是这样更灵活些，该合并的不该合并的无论多复杂多调几次就都实现了，用过的场景多了自然就明白我的意思，实在是没法解释。

正文从这里开始

使用之前先理解下html中table是如何合并行和列的

有了这些基本的html知识就很容易理解下面的代码了（extjs4.2）

    /**
     * grid合并列
     * @调用示例 grid.store.on('load',function(){mergeCells(grid,[0,1,2])});
     * @param {} grid
     * @param {} cols 需要合并列的列号集合[0,1,2]
     */
    mergeCells: function(grid,cols) {
        var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.lastChild.getElementsByTagName('tr');
        var removeObjs = [];
        var spanTd = n