extjs4 grid合并列和合并行

惯例先吐槽：之前用过几次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 = null;        Ext.each(arrayTr,function(tr){        spanTd = null;        var arrayTd=tr.getElementsByTagName("td");        Ext.each(cols,function(cellIndex){        var currTd=arrayTd[cellIndex];        if(!spanTd){        spanTd = currTd;        }else{        if(currTd.innerHTML == spanTd.innerHTML){        spanTd.colSpan=eval(spanTd.colSpan)+1;        spanTd.style.fontWeight = "bold";        removeObjs.push(currTd);        }else{        spanTd = currTd;        }        }        });        });        Ext.each(removeObjs,function(obj){        obj.style.display = 'none';        });    },        /**     * grid合并行     * @调用示例 grid.store.on('load',function(){mergeRows(grid,[1,3,5])});     * @param {} grid     * @param {} cols 需要合并行的列号集合[1,3,5]     */    mergeRows: function(grid,cols){        var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.lastChild.getElementsByTagName('tr');        var removeObjs = [];        var spanTd = null;        Ext.each(cols,function(cellIndex){        spanTd = null;        Ext.each(arrayTr,function(tr){        var arrayTd=tr.getElementsByTagName("td");        var currTd=arrayTd[cellIndex];        if(!spanTd){        spanTd=currTd;        }else{        if(currTd.innerHTML == spanTd.innerHTML){        spanTd.rowSpan=eval(spanTd.rowSpan)+1;        spanTd.style.fontWeight = "bold";        removeObjs.push(currTd);        }else{        spanTd = currTd;        }        }        });        });        Ext.each(removeObjs,function(obj){        obj.style.display = 'none';        });    },

                   grid.store.on('load',function() {
                        me.mergeRows(grid, [0]);
                        me.mergeCells(grid,[0,1,2]); //下图中的test和test2列内容都是空，但是不会被合并，没在数组中传进去的列都不会被合并

                   });

效果图如下（粗体字都是合并的内容）