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

/*
* 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. 路飞学城Python-Day182

    Evernote Export 集群介绍 1.集群介绍 集群:将多个物理机器组成一个逻辑计算机,实现负载和容错 计算机集群简称集群,是一种计算机系统,它通过一组松散集成的计算机软件或硬件连接起来高度紧 ...

  2. 路飞学城Python-Day136

    列举Http请求中常见的请求方式 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:O ...

  3. java中String和int的互相转化

    1. String 转 int 方式1:Integer.parseInt(); 方式2: Integer.valueOf(myStr).intValue(); 2.  int 转String 方式1: ...

  4. [NoiPlus2016]换教室

    flag++ //Writer : Hsz %WJMZBMR%tourist%hzwer #include <iostream> #include <cstdio> #incl ...

  5. 2018年九个很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  6. AJAX发送POST请求,请求提交后Method从POST变成GET

    服务器如果返回301或者302状态码,所有请求方法都会切换成GET头部的location如果要保证重定向后的请求方法,需要在服务端返回307(临时)或者308(永久)状态码,这两个状态码不会更改原请求 ...

  7. 数论(同余+hash)

    Time Limit:3000MS Memory Limit:65536KB Description You are given a sequence a[0]a[1] ... a[N-1] of d ...

  8. Cocos2d-x3.0 从代码中获取cocostudio编辑的UI控件

    依据名字查找控件 须要包括的头文件及名字空间: #include "cocostudio/CocoStudio.h" #include "ui/CocosGUI.h&qu ...

  9. SQL注入原理以及怎样避免注入

    SQL注入:究竟什么时候会用到SQL呢?回答是訪问数据库的时候.也就是说SQL注入-->直接威胁到了数据源,呵呵.数据库都收到了威胁,站点还能正常现实么? 所谓SQL注入,就是通过把SQL命令插 ...

  10. JavaScript的闭包理解

    因为本人是做java web 开发的,对js仅仅是存在非常浅的理解,js闭包的概念非常早就听说了,可是一直都不明确是什么意思,今天准备梳理一下闭关的概念; 闭包(closure)是Javascript ...