ExtJS 4.2 Grid组件单元格合并的方法


Posted in Javascript onOctober 12, 2016

ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。

目录

1. 原理

2. 多列合并

3. 代码与在线演示

1. 原理

1.1 HTML代码分析

首先创建一个Grid组件,然后查看下的HTML源码。

1.1.1 Grid组件

ExtJS 4.2 Grid组件单元格合并的方法

1.1.2 HTML代码

ExtJS 4.2 Grid组件单元格合并的方法

从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域)。

其中grid-body包含了许多tr元素,每一个tr都是代表Grid组件中的一行数据;每个tr内部都包含了许多td,每个td表示一个单元格。

1.1.3 结构图

ExtJS 4.2 Grid组件单元格合并的方法

1.2 原理

1.2.1 步骤说明

具体的操作是针对tr元素,步骤如下:

1) 比较第一行tr与第二行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隐藏。

ExtJS 4.2 Grid组件单元格合并的方法

2)tr1与tr3比较,两者值相等:设置tr1的rowspan属性的值+1;设置第tr3的td隐藏。

ExtJS 4.2 Grid组件单元格合并的方法

3) tr1与tr4比较,两者的td不相等。跳过本次比较,进行下一次比较:tr4与tr5比较(当前行与下一行进行比较)。

ExtJS 4.2 Grid组件单元格合并的方法

2.多列合并

Gird的合并可分为单列合并和多列合并,其中多列合并可分为两种:

第一种:逐个列合并。

第二种:相同列合并。

2.1 逐个列合并

说明:每个列在前面列合并的前提下可分别合并。

示例:

ExtJS 4.2 Grid组件单元格合并的方法

2.2 全部列合并

说明:只有相邻tr所指定的td都相同才会进行合并。

示例:

ExtJS 4.2 Grid组件单元格合并的方法

3. 代码与在线演示

3.1 代码

 /**
* 合并Grid的数据列
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param colIndexArray {Array} 需要合并列的Index(序号)数组;从0开始计数,序号也包含。
* @param isAllSome {Boolean} 是否2个tr的colIndexArray必须完成一样才能进行合并。true:完成一样;false:不完全一样
*/
function mergeGrid(grid, colIndexArray, isAllSome) {
 isAllSome = isAllSome == undefined ? true : isAllSome; // 默认为true
 
 // 1.是否含有数据
 var gridView = document.getElementById(grid.getView().getId() + '-body');
 if (gridView == null) {
 return;
 }
 
 // 2.获取Grid的所有tr
 var trArray = [];
 if (grid.layout.type == 'table') { // 若是table部署方式,获取的tr方式如下
 trArray = gridView.childNodes;
 } else {
 trArray = gridView.getElementsByTagName('tr');
 }
 
 // 3.进行合并操作
 if (isAllSome) { // 3.1 全部列合并:只有相邻tr所指定的td都相同才会进行合并
 var lastTr = trArray[0]; // 指向第一行
 // 1)遍历grid的tr,从第二个数据行开始
 for (var i = 1, trLength = trArray.length; i < trLength; i++) {
  var thisTr = trArray[i];
  var isPass = true; // 是否验证通过
  // 2)遍历需要合并的列
  for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
  var colIndex = colIndexArray[j];
  // 3)比较2个td的列是否匹配,若不匹配,就把last指向当前列
  if (lastTr.childNodes[colIndex].innerText != thisTr.childNodes[colIndex].innerText) {
   lastTr = thisTr;
   isPass = false;
   break;
  }
  }
 
  // 4)若colIndexArray验证通过,就把当前行合并到'合并行'
  if (isPass) {
  for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
   var colIndex = colIndexArray[j];
   // 5)设置合并行的td rowspan属性
   if (lastTr.childNodes[colIndex].hasAttribute('rowspan')) {
   var rowspan = lastTr.childNodes[colIndex].getAttribute('rowspan') - 0;
   rowspan++;
   lastTr.childNodes[colIndex].setAttribute('rowspan', rowspan);
   } else {
   lastTr.childNodes[colIndex].setAttribute('rowspan', '2');
   }
   // lastTr.childNodes[colIndex].style['text-align'] = 'center';; // 水平居中
   lastTr.childNodes[colIndex].style['vertical-align'] = 'middle';; // 纵向居中
   thisTr.childNodes[colIndex].style.display = 'none';
  }
  }
 }
 } else { // 3.2 逐个列合并:每个列在前面列合并的前提下可分别合并
 // 1)遍历列的序号数组
 for (var i = 0, colArrayLength = colIndexArray.length; i < colArrayLength; i++) {
  var colIndex = colIndexArray[i];
  var lastTr = trArray[0]; // 合并tr,默认为第一行数据
  // 2)遍历grid的tr,从第二个数据行开始
  for (var j = 1, trLength = trArray.length; j < trLength; j++) {
  var thisTr = trArray[j];
  // 3)2个tr的td内容一样
  if (lastTr.childNodes[colIndex].innerText == thisTr.childNodes[colIndex].innerText) {
   // 4)若前面的td未合并,后面的td都不进行合并操作
   if (i > 0 && thisTr.childNodes[colIndexArray[i - 1]].style.display != 'none') {
   lastTr = thisTr;
   continue;
   } else {
   // 5)符合条件合并td
   if (lastTr.childNodes[colIndex].hasAttribute('rowspan')) {
    var rowspan = lastTr.childNodes[colIndex].getAttribute('rowspan') - 0;
    rowspan++;
    lastTr.childNodes[colIndex].setAttribute('rowspan', rowspan);
   } else {
    lastTr.childNodes[colIndex].setAttribute('rowspan', '2');
   }
   // lastTr.childNodes[colIndex].style['text-align'] = 'center';; // 水平居中
   lastTr.childNodes[colIndex].style['vertical-align'] = 'middle';; // 纵向居中
   thisTr.childNodes[colIndex].style.display = 'none'; // 当前行隐藏
   }
  } else {
   // 5)2个tr的td内容不一样
   lastTr = thisTr;
  }
  }
 }
 }
} 

3.2 在线演示

在线演示:http://www.akmsg.com/ExtJS/index.html#App.Demo.MergeGridTab

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
js实现汉字排序的方法
Jul 23 Javascript
javascript冒泡排序小结
Apr 10 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
JS代码实现百度地图 画圆 删除标注
Oct 12 #Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 #Javascript
微信js-sdk界面操作接口用法示例
Oct 12 #Javascript
微信小程序 location API接口详解及实例代码
Oct 12 #Javascript
webpack+vue.js实现组件化详解
Oct 12 #Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 #Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python Django批量导入不重复数据
2016/03/25 Python
python3调用R的示例代码
2018/02/23 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
Nginx源码编译安装过程记录
2021/11/17 Servers