第二列根据第一列合并,第三列根据第二列合并。层级关系。

/*
* tableID表格的id
* colList要合并的字段例如:"overcount,totalcount"
*/
//加载成功后合并单元格
function mergeCellByField(tableID, colList){
var tTable = $("#" + tableID);//表的id
var ColArray = colList.split(",");//合并的列数组
var TableRowCnts = tTable.datagrid("getRows").length;//得到总行数
var tempTxt = tTable.datagrid("getRows")[0][ColArray[0]],//第一次的临时变量为第一行的值
curTxt='';//存放table表循环出来的对应的字段值
var cellNumArr = [];//存放每次合并开始的下标
var numTotal = 1;//相同的字段数
for (var i = 1; i <= TableRowCnts; i++) {
if(i==TableRowCnts){
curTxt='';//最后一个的情况
}else{
curTxt = tTable.datagrid("getRows")[i][ColArray[0]];
}
if(curTxt == tempTxt){
numTotal+=1;
}else{
//第一个字段的合并
tTable.datagrid("mergeCells", {
index:i-numTotal,//合并开始的索引
field: ColArray[0],//合并的字段
rowspan: numTotal,//合并的行数
colspan: null//合并的列数
});
cellNumArr.push(i-numTotal);//每次合并的行下标的开始索引
tempTxt = curTxt;//将每次循环的值赋值给临时变量,与上一次对比
numTotal = 1; //每次不同时,第一个不算入,从第二个开始对比
}
}
mergeCellByFieldSecond(tTable,ColArray,cellNumArr)
}
//第二个字段的合并
function mergeCellByFieldSecond(tTable, ColArray,cellNumArr){
var befCellArr = cellNumArr;
var tTable = tTable;
var ColArray = ColArray;
var thirdIndexArr = [];
var tempTxt = '';
for(var j = 0; j <= befCellArr.length-1;j++){
var num =befCellArr[j]+1;
var nextNum = befCellArr[j+1];
var index = befCellArr[j];
tempTxt = tTable.datagrid("getRows")[index][ColArray[1]],curTxt='';
var tempArr = cellRow(tTable,ColArray,num,nextNum,tempTxt,1);
thirdIndexArr = thirdIndexArr.concat(tempArr)
}
mergeCellByFieldThird(tTable,ColArray,thirdIndexArr);
}
//第三个字段合并
function mergeCellByFieldThird(tTable,ColArray,thirdIndexArr){
var befCellArr = thirdIndexArr;
var tTable = tTable;
var ColArray = ColArray;
for(var k = 0; k <= befCellArr.length-1;k++){
var num =befCellArr[k]+1;
var nextNum = befCellArr[k+1];
var index = befCellArr[k];
tempTxt = tTable.datagrid("getRows")[index][ColArray[2]];
var tempArr = cellRow(tTable,ColArray,num,nextNum,tempTxt,2);
}
}
//根据前一列合并
function cellRow(tTable,ColArray,num,nextNum,tempTxt,colum){
var TableRowCnts = tTable.datagrid("getRows").length;//得到总行数
var curTxt='';
var cellNumArr = [];//存放每次合并开始的下标
var numTotal = 1;//相同的字段数
if(nextNum == null){
nextNum =TableRowCnts;
}
for (var i = num; i <= nextNum; i++) {
if(i == nextNum){
curTxt='';//最后一个的情况
}else{
curTxt = tTable.datagrid("getRows")[i][ColArray[colum]];
}
if(curTxt == tempTxt){
numTotal+=1;
}else{
//第一个字段的合并
tTable.datagrid("mergeCells", {
index:i-numTotal,//合并开始的索引
field: ColArray[colum],//合并的字段
rowspan: numTotal,//合并的行数
colspan: null//合并的列数
});
cellNumArr.push(i-numTotal);//每次合并的行下标的开始索引
tempTxt = curTxt;//将每次循环的值赋值给临时变量,与上一次对比
numTotal = 1; //每次不同时,第一个不算入,从第二个开始对比
}
}
return cellNumArr;
}

效果图:

easyUI datagarid单元格动态合并的更多相关文章

  1. freemarker实现单元格动态合并-行合并

    项目需求:项目中有个需求,需要将一些数据库中的数据根据需求导出,生成一个word,研究了一些技术,其中包括POI.freemaker,对比了一下实现过程及技术难度没最终使用了freemaker; 原始 ...

  2. 如何让elemengUI中的表格组件相同内容的单元格自动合并

    1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...

  3. 葡萄城报表 SP2 新特性(1)— 单元格智能合并

    中国式复杂报表的布局,因为数据的动态性和结构性,导致其布局往往是无规律,且在设计时无法预测的,如单元格合并,通常不仅希望在每一列的数据展现中,能够根据需要自动将相同的单元格合并,且每个单元格之间该属性 ...

  4. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  5. DW 做一个table表 对单元格进行合并

    编辑前的代码 <body> <table width="500" border="0" bgcolor='#000000' backgroun ...

  6. 1.0 poi单元格合合并及写入

    最近项目中用到poi生成Excel时,用到了单元格合并,于是参考了http://www.anyrt.com/blog/list/poiexcel.html写的文章,但是其中有些地方不是很清楚,于是自己 ...

  7. python xlwt 设置单元格样式-合并单元格

    xlwt模块详解--合并单元格 import xlwtworkbook = xlwt.Workbook()worksheet = workbook.add_sheet('My sheet')# 合并第 ...

  8. jQuery实现HTML表格单元格的合并功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. EasyUI Datagrid 单元格编辑

    3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...

随机推荐

  1. Substring Uva 11468_记忆化搜索 + AC自动机

    Code: #include<cstdio> #include<cstring> #include<queue> using namespace std; cons ...

  2. 了解http协议

    http:超文本传输协议 https:安全超文本传输协议 FTP:文件传输协议 TCP:网络控制协议 IP:互联网协议 UDP:用户数据协议 https协议特点-------------------- ...

  3. sublime Text3的使用

    sublime text百度百科: Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python ...

  4. [luogu2047 NOI2007] 社交网络 (floyed最短路)

    传送门 输入输出样例 输入样例#1: 4 4 1 2 1 2 3 1 3 4 1 4 1 1 输出样例#1: 1.000 1.000 1.000 1.000 题解 在进行floyed的过程中,顺便更新 ...

  5. [NOIP 2010] 关押罪犯 (二分+二分图判定 || 并查集)

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用"怨气值"( ...

  6. Git学习笔记(1)

    1.安装Git: 在linux下安装:yum install git 其他系统安装在这里略去~~~ 安装完成后,需要设置一下,在命令行输入以下命令: [root@xwq ~]# git config ...

  7. Python编程:从入门到实践 - pygal篇 - Die

    掷骰子 # die.py 骰子类 from random import randint class Die(): """表示一个骰子的类""" ...

  8. 各项硬件使用剖析(一)---让你一眼就能区分瓶颈是Memory、processor ORdisk!

      

  9. BA-siemens-ppm模块调试

    第一部分:现场接线 1. 拨码:朝向数字那一端为0,远离数字那一端为1,PPM的地址设定方法就是将拨码器拨为跟系统架构表一样的数字,比如一个1U32的编号为77020,那么它的编号就是20,将4和16 ...

  10. JavaScript中==和===区别

    在我们的日常编码中对于===是不常用的,但是它很重要 ===:表示绝对相等(严格) !==:表示不绝对相等 ==:表示相等(不严格) !=:表示不相等 看一下列子: null==undefined   ...