文档章节

Ext单元格合并

微尘鉴
 微尘鉴
发布于 2016/02/22 10:14
字数 428
阅读 95
收藏 0

Ext虽可以去除相同的单元格,但右侧数据左移导致grid错乱,有待解决。。。

 /** 
 * Kunoy 
 * 合并单元格 
 * @param {} grid  要合并单元格的grid对象 
 * @param {} cols  要合并哪几列 [1,2,4] 
 */
var mergeCells = function(grid,cols) {
 var gridid = '#' + grid.getId() + '-body';
 var arrayTr = $('tr', $(gridid));
 var trCount = arrayTr.length;
 var arrayTd;
 var td;
 var merge = function(rowspanObj, removeObjs) { //定义合并函数  
  if (rowspanObj.rowspan != 1) {
     debugger;
      var colName = grid.columns[rowspanObj.td - 1].dataIndex;// colName.dataIndex
   arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行  
   td = arrayTd[rowspanObj.td - 1];
   td.rowSpan = rowspanObj.rowspan;
   td.vAlign = "middle";
   Ext.each(removeObjs, function(obj) { //隐身被合并的单元格
    debugger;
    arrayTd = arrayTr[obj.tr].getElementsByTagName("td");
    arrayTd[obj.td-1].style.display='none';
    //arrayTd[obj.td-1].style.borderTop = "none"; 
    arrayTd[obj.td-1].style.backgroundColor = '#6633FF';
                arrayTd[obj.td - 1].innerText = '';
                $(arrayTd[obj.td - 1]).css("border-top",'1px solid red'); 
   });
  }
 };
 var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}      
 var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]  
 var col;
 Ext.each(cols, function(colIndex) { //逐列去操作tr 
  var rowspan = 0;
  var divHtml = null; //单元格内的数值      
  //debugger;
  for ( var i = 0; i < trCount; i++) { //i=0表示表头等没用的行  
   arrayTd = arrayTr[i].getElementsByTagName("td");
   var cold = 0;
   col = colIndex + cold; //跳过RowNumber列和check列  
   if (!divHtml) {
    divHtml = arrayTd[col - 1].innerHTML;
    rowspanObj = {
     tr : i,
     td : col,
     rowspan : rowspan
    }
   } else {
    var cellText = arrayTd[col - 1].innerHTML;
    var addf = function() {
     //debugger;
     rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1;
     removeObjs.push({
      tr : i,
      td : col
     });
     if (i == trCount - 1)
      merge(rowspanObj, removeObjs); //执行合并函数  
    };
       var mergef = function () {
                    merge(rowspanObj, removeObjs); //执行合并函数  
                    divHtml = cellText;
                    rowspanObj = { tr: i, td: col, rowspan: rowspan }
                    removeObjs = [];
                };
                if (cellText == divHtml) {
                  if(colIndex!=cols[0]){   
                             mergef();                             
                     }else  
                         addf();           
                }else{
                 mergef();
                }
   }
  }
 });
};

 grid加载数据完成后自动调用合并方法

duplicateQueryStore.on('load',function(){  
  //==>防止Grid重绘, 人工延迟
  setTimeout(function(){ 
  mergeCells(Ext.getCmp('duplicateGridId'),[6,7,8,9]); 
  },150);
});

   注:可在Chorme浏览器上按F12键,通过debugger进行调试。

本文转载自:http://blog.csdn.net/kunoy/article/details/7829395

微尘鉴
粉丝 8
博文 80
码字总数 30075
作品 0
海淀
高级程序员
私信 提问
Ext GridPanel 设置点击次数打开可编辑单元格

Ext GridPanel 设置点击次数打开可编辑单元格 在页面中使用GridPanel显示表格,其中有单元格需要点击后变成可编辑状态。GridPanel默认是双击打开可编辑单元格,但是有时又需要单击来打开。这...

laowang2915
2017/08/03
0
0
Ext.grid.ColumnModel 配置

学Ext快二个多星期了,有些东西觉得还是有必要记下来,以备日后用的着的时候方便记忆。通常Ext的写法太多了,如果不能熟练的知道每种写法,就会被各种怪异的写法给搅混了,本文主要帮助自己加深...

awbeci
2012/10/25
0
0
有关ExtJsgrid的操作大全

1、Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能...

hengliang_的博客
2017/12/14
0
0
jQuery EasyUI使用教程之合并数据网格的单元格

<jQuery EasyUI最新试用版免费下载> 数据网格经常需要合并多个单元格,本教程将教会您在数据网格中如何合并单元格。 合并数据网格的单元格,您只需要简单地调用'mergeCells'方法并传入合并信...

Miss_Hello_World
2016/03/11
247
0
OperaMasks RoadMap 正式发布

随着OperaMasks 2.2正式版的发布与OperaMasks.org新网站的上线,近期,OperaMasks团队动作频出,并正式发布了其RoadMap路线图。做为国内开源的探索者,其在开源推动上的坚持和努力,值得我们...

红薯
2009/07/16
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

秒杀系统思路

业务分析 技术挑战 请求响应要快:无论成功失败,需要尽快返回给用户 架构设计   前端:静态化   站点层:限制请求数   服务层:乐观锁写缓存   数据库CAP:读写高可用,一致性,扩容...

雷开你的门
10分钟前
7
0
最全的教育行业大数据解决方案,个个针对痛点

大数据的悄然兴起也带动了教育行业的革新,移动教育、云课堂等的出现,使得教育行业再次成为了可以中长期保持高景气的行业。然而,初涉数据领域的教育行业同时也面临着相当大的难题,还需要更...

朕想上头条
14分钟前
5
0
预约模块设计分析

1.预约功能描述: 预约是小程序中常见的一种商品管理系统,商家可根据商品或服务的特性,灵活设置预约细节,为用户提供线上预约服务,如场地预约,商品预定等,实现高效经营。 预约场景: ...

鱼煎
17分钟前
4
0
阿里云日志服务构建网站实时分析大盘实战

场景分析 挖掘数据价值是当前企业级网站共同面临的问题。买买网是一个电商平台网站,每天拥有大量的用户访问和购买记录。为了引导用户直接消费,提升购买率和转化率,不同的用户类别需要推荐...

阿里云官方博客
18分钟前
2
0
TL665xF-EasyEVM开发板硬件处理器、NAND FLASH、RAM

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
21分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部