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 小贴士一星期合集
Apr 07 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
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
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php实现算术验证码功能
2018/12/05 PHP
javascript 验证日期的函数
2010/03/18 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
Linux机考试题
2015/07/17 面试题
课改先进个人汇报材料
2014/01/26 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
八年级语文教学反思
2014/02/11 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
实习协议书范本
2014/04/22 职场文书
董事长助理岗位职责
2015/02/11 职场文书
夫妻吵架保证书
2015/05/08 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript