http://blog.csdn.net/kunoy/article/details/7829395

/**
* Kunoy
* 合并单元格
* @param {} grid 要合并单元格的grid对象
* @param {} cols 要合并哪几列 [1,2,4]
*/
var mergeCells = function(grid,cols){
var arrayTr=document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChild.getElementsByTagName('tr');
var trCount = arrayTr.length;
var arrayTd;
var td;
var merge = function(rowspanObj,removeObjs){ //定义合并函数
if(rowspanObj.rowspan != 1){
arrayTd =arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行
td=arrayTd[rowspanObj.td-1];
td.rowSpan=rowspanObj.rowspan;
td.vAlign="middle";
Ext.each(removeObjs,function(obj){ //隐身被合并的单元格
arrayTd =arrayTr[obj.tr].getElementsByTagName("td");
arrayTd[obj.td-1].style.display='none';
});
}
};
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 = 1;
var divHtml = null;//单元格内的数值
for(var i=1;i<trCount;i++){ //i=0表示表头等没用的行
arrayTd = arrayTr[i].getElementsByTagName("td");
var cold=0;
// Ext.each(arrayTd,function(Td){ //获取RowNumber列和check列
// if(Td.getAttribute("class").indexOf("x-grid-cell-special") != -1)
// cold++;
// });
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(){
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]){
var leftDisplay=arrayTd[col-2].style.display;//判断左边单元格值是否已display
if(leftDisplay=='none')
addf();
else
mergef();
}else
addf();
}else
mergef();
}
}
});
};

  

extjs grid合并单元格的更多相关文章

  1. Extjs gridpanel 合并单元格

    /* * *合并单元格的函数,合并表格内所有连续的具有相同值的单元格.调用方法示例: * *store.on("load",function(){gridSpan(grid,&qu ...

  2. Windows Forms DataGridView中合并单元格

    Windows Forms DataGridView 没有提供合并单元格的功能,要实现合并单元格的功能就要在CellPainting事件中使用Graphics.DrawLine和 Graphics.D ...

  3. easyui 自动动态合并单元格

    .......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...

  4. MiniUI框架合并单元格

    在项目中遇到合并单元格的问题,所以总结一下. 用的是miniUI框架,所以只谈miniUI中的单元格合并. (1)必须添加onLoad="onLoad" (2)需要在JS中进行单元 ...

  5. C# 获取Excel中的合并单元格

    C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...

  6. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  7. NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  8. poi获取合并单元格内的第一行第一列的值

    当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...

  9. Repeater多列分别合并单元格

    GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...

随机推荐

  1. (转)Unreal Shader模块(四): 着色器编译

    本文为(转):Unreal 调试着色器编译过程     调试着色器编译过程 Rolando Caloca 在 April 19, 2016 | 学习编程 Share on Facebook  Shar ...

  2. Linux系统源码安装cloud-init

    参考:https://cloud.tencent.com/document/product/213/12587使用以下命令下载 cloud-init 源码包 官网下载地址:https://launch ...

  3. Ubuntu系列问题

    一.Ubuntu16.04 intel_rapl : no valid rapl domains found in packge0 echo 'blacklist intel_rapl' >&g ...

  4. jQuery基础知识点(下)

    在实际开发中,jQuery的实践性非常强大.上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展. 1.表单值的操作 //获取文本框的值 //txt.value var val = $( ...

  5. 【bzoj3585/bzoj3339】mex/Rmq Problem 莫队算法+分块

    原文地址:http://www.cnblogs.com/GXZlegend/p/6805283.html 题目描述 有一个长度为n的数组{a1,a2,...,an}.m次询问,每次询问一个区间内最小没 ...

  6. hdu 1535 Invitation Cards (最短路径)

    Invitation Cards Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  7. vi - vim的一些遗忘点

    1. vi 供分为三种模式:一般模式.编辑模式和命令行模式.i / Esc + :wq :q :q! 使vi在一般模式与编辑模式中来回转换. /word 向下寻找一个名称为word的字符串: ?wor ...

  8. CF995E Number Clicker 解题报告

    CF995E Number Clicker 题目描述 Allen is playing Number Clicker on his phone. He starts with an integer u ...

  9. 在HTML网页上打印需要的内容

    首先在head里面加入下面一段js代码: function preview(oper) { if (oper < 10) { bdhtml = window.document.body.inne ...

  10. 点击图片改变背景的demo-学习第二天

    实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...