ExtJS 4.2 Grid组件本身不提供单元格合并功能，所以需要自己实现。

目录

1.原则

2.多列合并

3.代码和在线演示

1.原则

1.1 HTML代码分析

首先，创建一个网格组件，然后检查下面的HTML源代码。

1.1.1网格组件

1.1.2 HTML代码

从这些代码中可以看出，网格组件可以分为两个区域：网格头和网格体(如果有工具栏和分页栏，它们都会有自己独立的区域)。

网格体包含许多tr元素，每个tr代表网格组件中的一行数据；每个tr中有许多td，每个TD代表一个小区。

1.1.3结构图

1.2原则

步骤描述

具体操作为tr元素，步骤如下：

1)将第一行tr的td值与第二行tr的TD值进行比较。如果两行的值相等，则设置第一行tr的td的rowspan属性值1；设置第二行tr的td隐藏。

2)比较第一行tr和第三行tr的td值。如果两行的值相等，则设置第一行tr的td的rowspan属性的值1；设置第三行tr的td隐藏。

3)重复上述步骤。如果两行的值不相等，则跳过此比较，进行下一次比较：将当前行与下一行进行比较。

1.2.2示例

1)比较tr1和tr2，两个值相等：设置tr1的rowspan属性的值1；设置tr2的td隐藏。

2)比较tr1和tr3，两个值相等：设置Tr1的rowspan属性的值1；设置tr3的td隐藏。

3)比较Tr1和tr4，Tr4的td不相等。跳过这个比较，进行下一个比较：比较tr4和tr5(比较当前行和下一行)。

2.多列合并

网格合并可以分为单列合并和多列合并，其中多列合并可以分为两种类型：

第一种是逐列合并。

第二：合并同一个列。

2.1逐列合并

注意：每一列都可以在合并前一列的前提下单独合并。

示例：

2.2合并所有列

注意：只有相邻TRs指定的td相同，才会进行合并。

示例：

3.代码和在线演示

3.1代码

/*** 合并格子的数据列* @param网格{Ext .网格。面板}需要合并的网格* @param colIndexArray {Array}需要合并列的索引（序号)数组；从0开始计数，序号也包含* @ param isAllSome {布尔值}是否2个tr的colIndexArray必须完成一样才能进行合并真实：完成一样；错误：不完全一样*/函数mergeGrid(grid，colIndexArray，I all some){ I all some=I all some==undefined？true : isAllSome//默认为true //1 .是否含有数据var gridView=文档。getelementbyid(网格。getview().getId()'-body ')；if(GridView==null){ return；} //2.获取格子的所有tr var Trarray=[]；if(网格。布局。type==' table '){//若是桌子部署方式，获取的tr方式如下trArray=GridView . child nodes } else { trArray=GridView。GetElementsBytagname(' tr ')；} //3.进行合并操作if (isAllSome) { //3.1全部列合并：只有相邻tr所指定的任务描述都相同才会进行合并var Lasttr=trArray[0]；//指向第一行//1)遍历格子的tr，从第二个数据行开始for (var i=1，trLength=trArray . lengthi trLengthI){ var THtr=trArray[I]；var isPass=true//是否验证通过//2)遍历需要合并的列for (var j=0，colArrayLength=colindexarray。长度；j colArrayLengthj){ var colIndex=colIndexArray[j]；//3)比较2个任务描述的列是否匹配，若不匹配，就把最后的指向当前列if(lastr . childnodes[colIndex].innerText！=thitr。子节点.内部文本){ Lasttr=ThErisPass=false打破；} } //4)若colIndexArray验证通过，就把当前行合并到'合并行if (isPass) { for (var j=0，colArrayLength=colindexarray。长度；j colArrayLengthj){ var colIndex=colIndexArray[j]；//5)设置合并行的td rowspan属性if(lastr . childnodes[colIndex].hasAttribute(' row span '){ var row span=Lasttr。子节点.getAttribute('行跨度')-0；rowspanlastr。子节点.setAttribute('rowspan '，row span)；} else { lastr。子节点.setAttribute('rowspan '，' 2 ')；}//lastr。子节点.style[' text-align ']=' center '；//水平居中lastr。子节点.样式['垂直对齐']='中间；//纵向居中那里。子节点[colIndex]。风格。显示='无'；} } } } else { //3.2逐个列合并：每个列在前面列合并的前提下可分别合并//1)遍历列的序号数组for (var i=0，colArrayLength=colindexarray。长度；我是colArrayLengthI){ var colIndex=colIndexArray[I]；var Lasttr=trArray[0]；//合并tr，默认为第一行数据//2)遍历格子的tr，从第二个数据行开始for (var j=1，trLength=trArray . length j trLength j){ var THtr=trArray[j]；//3)2个tr的任务描述内容一样if(lastr . childnodes[colIndex].内部文本==thitr。子节点.innerText) { //4)若前面的任务描述未合并，后面的任务描述都不进行合并操作如果我这样做了。子节点[colIndexArray[I-1]]。风格。展示！=' none '){ Lasttr=ThEr；继续；} else { //5)符合条件合并TD if(Lasttr。子节点.hasAttribute(' row span '){ var row span=Lasttr。子节点.getAttribute('行跨度')-0；rowspanlastr。子节点.setAttribute('rowspan '，row span)；} else { lastr。子节点.setAttribute('rowspan '，' 2 ')；}//lastr。子节点.style[' text-align ']=' center '；//水平居中lastr。子节点.样式['垂直对齐']='中间；//纵向居中那里。子节点[colIndex]。风格。显示='无'；//当前行隐藏} } else { //5)2个tr的任务描述内容不一样lastr=ThEr} } } }} 3.2 在线演示

在线演示：http://www . akmsg.com/ext js/index . html # App .演示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。