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 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
javascript中var的重要性分析
Feb 11 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
js实现tab切换效果
Feb 16 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue 全局环境切换问题
Oct 27 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python re模块介绍
2014/11/30 Python
深入理解python函数递归和生成器
2016/06/06 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python 项目转化为so文件实例
2019/12/23 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
django创建css文件夹的具体方法
2020/07/31 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
小区门卫工作职责
2013/12/14 职场文书
学生自我评价范文
2014/02/02 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
财产公证书样本
2014/04/04 职场文书
食品安全工作方案
2014/05/07 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android