在Grid加载完成后直接调用此方法,需要注意的是,合并的单元格值必须一样。

 1 /**
 2 * 合并单元格
 3 * @param {} grid  要合并单元格的grid对象
 4 * @param {} cols  要合并哪几列 [1,2,4]
 5 */
 6
 7 function mergeCells(grid, cols) {
 8     var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.firstChild
 9             .getElementsByTagName('tr');
10     //var arrayTr = document.getElementById(grid.getId()+"-body").firstChild.nextSibling;
11     //var arrayTr = Ext.get(grid.getId()+"-body").first().first().first().select("tr");
12     var trCount = arrayTr.length;
13     var arrayTd;
14     var td;
15     var merge = function(rowspanObj, removeObjs) { //定义合并函数
16         if (rowspanObj.rowspan != 1) {
17             arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行
18             td = arrayTd[rowspanObj.td - 1];
19             td.rowSpan = rowspanObj.rowspan;
20             td.vAlign = "middle";
21             Ext.each(removeObjs, function(obj) { //隐身被合并的单元格
22                         arrayTd = arrayTr[obj.tr].getElementsByTagName("td");
23                         arrayTd[obj.td - 1].style.display = 'none';
24                     });
25         }
26     };
27     var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}
28     var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]
29     var col;
30
31     Ext.each(cols, function(colIndex) { //逐列去操作tr
32                 var rowspan = 1;
33                 var divHtml = null; //单元格内的数值
34                 for (var i = 1; i < trCount; i++) { //i=0表示表头等没用的行
35                     arrayTd = arrayTr[i].getElementsByTagName("td");
36                     var cold = 0;
37                     Ext.each(arrayTd, function(Td) { //获取RowNumber列和check列
38                                 if (Td.getAttribute("class")
39                                         .indexOf("x-grid-cell-special") != -1)
40                                     cold++;
41                             });
42                     col = colIndex + cold; //跳过RowNumber列和check列
43                     if (!divHtml) {
44                         divHtml = arrayTd[col - 1].innerHTML;
45                         rowspanObj = {
46                             tr : i,
47                             td : col,
48                             rowspan : rowspan
49                         }
50                     } else {
51                         var cellText = arrayTd[col - 1].innerHTML;
52                         var addf = function() {
53                             rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1;
54                             removeObjs.push({
55                                         tr : i,
56                                         td : col
57                                     });
58                             if (i == trCount - 1)
59                                 merge(rowspanObj, removeObjs);//执行合并函数
60                         };
61                         var mergef = function() {
62                             merge(rowspanObj, removeObjs);//执行合并函数
63                             divHtml = cellText;
64                             rowspanObj = {
65                                 tr : i,
66                                 td : col,
67                                 rowspan : rowspan
68                             }
69                             removeObjs = [];
70                         };
71                         if (cellText == divHtml) {
72                             if (colIndex != 1) {
73                                 var leftDisplay = arrayTd[col - 2].style.display;//判断左边单元格值是否已display
74                                 if (leftDisplay == 'none'){
75                                     addf();
76                                 }else{
77                                     mergef();
78                                 }
79                             } else{
80                                 addf();
81                             }
82                         } else{
83                             mergef();
84                         }
85                     }
86                 }
87             });
88 };

转载于:https://www.cnblogs.com/small-bai/p/ExtJs-grid%e5%90%88%e5%b9%b6%e5%8d%95%e5%85%83%e6%a0%bc-%e8%b7%a8%e8%a1%8c%e8%b7%a8%e5%88%97.html

ExtJs - grid 合并单元格 跨行跨列相关推荐

  1. php 中如何设置单元格跨行,HTML表格中单元格跨行跨列

    HTML表格中单元格跨行跨列 对于标准的表格,每一行的单元格 数量是一样的.但在实际使用中,经常会遇到跨行跨列的表格,这个时候,每一行的数量就不一样了. 一.定义 所谓"跨行",是 ...

  2. ExtJs grid合并单元格

    extjs中,如果要输出一些有合并单元格的表格,要怎么做呢?如图所示: 从网上找了个例子,其主要思想是表格的store装载完毕后,随即对这个grid的td进行一个个的控制,用的方法也是原始的javas ...

  3. HTML-表格跨行跨列

    HTML-表格跨行跨列 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/ ...

  4. 2.单元格的跨列居中和自动换行

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 单元格的跨列居中和自动换行 前言 一.跨列居中 二.自动换行 前言 制作表格时,为了不影响后续的数据处理与分析,可以使用跨列居中功能代 ...

  5. C# 操作word之纵向合并单元格及其跨页问题的解决

    1.纵向合并单元格 //从第13行起(包括第13行),向上选择12行,并纵向合并 int rowcount = 12; int cellrow = 13; table.Cell(cellrow, 1) ...

  6. Bootstrap mergeCells合并单元格(多列)

    /** 合并单元格 @param target 目标表格对象 @param data 原始数据(在服务端完成排序) @param fieldName 合并参照的属性名称 @param fieldLis ...

  7. 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  8. View UI (iview)表格合并单元格(行/列合并)

    有时我们在开发过程中会遇到表格里有合并单元格的需求. 今天以View UI (iview)组件库为例. 1. 打开iview官网-table会发现有合并单元格示例: 2. 但是在实际项目中,无法做到像 ...

  9. java poi excel合并单元格 相同的列以及在有父级约束条件下合并二级列

    import org.apache.poi.ss.usermodel.Sheet; import org.apache.poi.ss.util.CellRangeAddress;public clas ...

最新文章

  1. 每日一皮:互联网人去银行面试...
  2. Bootstrap学习笔记(三) 网格系统
  3. dom内容区域的滚动overflow,scroll
  4. 沈阳建筑大学c语言真题,沈阳建筑大学C语言复习资料.doc
  5. 转帖:免费申请样片的公司大全!!
  6. mysql的Innodb为什么使用B+树
  7. pycharm怎么做html网页_html下拉菜单怎么做
  8. Ubuntu下安装MeshLab教程
  9. mybatis-plus自定义sql分页
  10. Ubuntu操作系统
  11. dos窗口运行java程序时中文乱码的解决方法
  12. java 线程 block_JAVA线程的BLOCK状态实例分析
  13. Masimo与Penington研究所合作,提升公众对处方阿片类药物过量危害的认识
  14. Windows10创建工作组、加入工作组、查看工作组包含的所有电脑
  15. 【python初学者日记】selenium初体验——“秒杀商品”、“清空购物车”技能养成记(一)
  16. 太极自定义diy名片模板_没有合适的手帐本?拿走这些电子模板,自制属于自己的手帐本...
  17. Python openjudge 018:大象喝水
  18. 《Fundamentals of Computer Grahpics》虎书第三版翻译——第二章 各种各样的数学
  19. tkinter -- tcp
  20. 早期 计算机网络只是包括,计算机网络-判断题.docx

热门文章

  1. 结合源代码分析一个完整的中断过程【转】
  2. 小学徒进阶系列—JVM对String的处理
  3. Shuffling Machine (20)
  4. 三坐标测量圆直径_多台三坐标测量机联动测量方法的研究
  5. linux下c获系统内存的函数,linux下c编程之内存共享shemget函数的实现及案例-bmi体重身高测试2...
  6. java 创建存储过程_如何在pl/sql中创建及调用JAVA存储过程 | 学步园
  7. Postman系列之基本操作及设置
  8. 李宏毅机器学习2021】机器学习模型的可解释性 (Explainable ML)
  9. Pickle Finance:BAC-DAI Pickle Jar将在迁移到BAS v2后更新
  10. 比特币矿商比特微正筹备美股上市