ExtJs - grid 合并单元格 跨行跨列
在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 合并单元格 跨行跨列相关推荐
- php 中如何设置单元格跨行,HTML表格中单元格跨行跨列
HTML表格中单元格跨行跨列 对于标准的表格,每一行的单元格 数量是一样的.但在实际使用中,经常会遇到跨行跨列的表格,这个时候,每一行的数量就不一样了. 一.定义 所谓"跨行",是 ...
- ExtJs grid合并单元格
extjs中,如果要输出一些有合并单元格的表格,要怎么做呢?如图所示: 从网上找了个例子,其主要思想是表格的store装载完毕后,随即对这个grid的td进行一个个的控制,用的方法也是原始的javas ...
- HTML-表格跨行跨列
HTML-表格跨行跨列 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/ ...
- 2.单元格的跨列居中和自动换行
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 单元格的跨列居中和自动换行 前言 一.跨列居中 二.自动换行 前言 制作表格时,为了不影响后续的数据处理与分析,可以使用跨列居中功能代 ...
- C# 操作word之纵向合并单元格及其跨页问题的解决
1.纵向合并单元格 //从第13行起(包括第13行),向上选择12行,并纵向合并 int rowcount = 12; int cellrow = 13; table.Cell(cellrow, 1) ...
- Bootstrap mergeCells合并单元格(多列)
/** 合并单元格 @param target 目标表格对象 @param data 原始数据(在服务端完成排序) @param fieldName 合并参照的属性名称 @param fieldLis ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- View UI (iview)表格合并单元格(行/列合并)
有时我们在开发过程中会遇到表格里有合并单元格的需求. 今天以View UI (iview)组件库为例. 1. 打开iview官网-table会发现有合并单元格示例: 2. 但是在实际项目中,无法做到像 ...
- java poi excel合并单元格 相同的列以及在有父级约束条件下合并二级列
import org.apache.poi.ss.usermodel.Sheet; import org.apache.poi.ss.util.CellRangeAddress;public clas ...
最新文章
- 每日一皮:互联网人去银行面试...
- Bootstrap学习笔记(三) 网格系统
- dom内容区域的滚动overflow,scroll
- 沈阳建筑大学c语言真题,沈阳建筑大学C语言复习资料.doc
- 转帖:免费申请样片的公司大全!!
- mysql的Innodb为什么使用B+树
- pycharm怎么做html网页_html下拉菜单怎么做
- Ubuntu下安装MeshLab教程
- mybatis-plus自定义sql分页
- Ubuntu操作系统
- dos窗口运行java程序时中文乱码的解决方法
- java 线程 block_JAVA线程的BLOCK状态实例分析
- Masimo与Penington研究所合作,提升公众对处方阿片类药物过量危害的认识
- Windows10创建工作组、加入工作组、查看工作组包含的所有电脑
- 【python初学者日记】selenium初体验——“秒杀商品”、“清空购物车”技能养成记(一)
- 太极自定义diy名片模板_没有合适的手帐本?拿走这些电子模板,自制属于自己的手帐本...
- Python openjudge 018:大象喝水
- 《Fundamentals of Computer Grahpics》虎书第三版翻译——第二章 各种各样的数学
- tkinter -- tcp
- 早期 计算机网络只是包括,计算机网络-判断题.docx
热门文章
- 结合源代码分析一个完整的中断过程【转】
- 小学徒进阶系列—JVM对String的处理
- Shuffling Machine (20)
- 三坐标测量圆直径_多台三坐标测量机联动测量方法的研究
- linux下c获系统内存的函数,linux下c编程之内存共享shemget函数的实现及案例-bmi体重身高测试2...
- java 创建存储过程_如何在pl/sql中创建及调用JAVA存储过程 | 学步园
- Postman系列之基本操作及设置
- 李宏毅机器学习2021】机器学习模型的可解释性 (Explainable ML)
- Pickle Finance:BAC-DAI Pickle Jar将在迁移到BAS v2后更新
- 比特币矿商比特微正筹备美股上市