easyUI datagarid单元格动态合并
第二列根据第一列合并,第三列根据第二列合并。层级关系。
/*
* 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单元格动态合并的更多相关文章
- freemarker实现单元格动态合并-行合并
项目需求:项目中有个需求,需要将一些数据库中的数据根据需求导出,生成一个word,研究了一些技术,其中包括POI.freemaker,对比了一下实现过程及技术难度没最终使用了freemaker; 原始 ...
- 如何让elemengUI中的表格组件相同内容的单元格自动合并
1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...
- 葡萄城报表 SP2 新特性(1)— 单元格智能合并
中国式复杂报表的布局,因为数据的动态性和结构性,导致其布局往往是无规律,且在设计时无法预测的,如单元格合并,通常不仅希望在每一列的数据展现中,能够根据需要自动将相同的单元格合并,且每个单元格之间该属性 ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- DW 做一个table表 对单元格进行合并
编辑前的代码 <body> <table width="500" border="0" bgcolor='#000000' backgroun ...
- 1.0 poi单元格合合并及写入
最近项目中用到poi生成Excel时,用到了单元格合并,于是参考了http://www.anyrt.com/blog/list/poiexcel.html写的文章,但是其中有些地方不是很清楚,于是自己 ...
- python xlwt 设置单元格样式-合并单元格
xlwt模块详解--合并单元格 import xlwtworkbook = xlwt.Workbook()worksheet = workbook.add_sheet('My sheet')# 合并第 ...
- jQuery实现HTML表格单元格的合并功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- EasyUI Datagrid 单元格编辑
3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...
随机推荐
- Substring Uva 11468_记忆化搜索 + AC自动机
Code: #include<cstdio> #include<cstring> #include<queue> using namespace std; cons ...
- Tomcat在处理POST和GET提交方式时的字符编码问题
部分内容参考http://yejg1212.blog.163.com/blog/static/3958206120098384327191(原作者:飞翔) 一.POST和GET请求方式的区别: 在默 ...
- ubuntu16.04下安装配置nodejs及npm
官网下载ubuntu对应的二进制文件(Linux Binaries (x64)这一行) https://nodejs.org/en/download/ 解压并安装 ``` $tar zxvf node ...
- Project Euler 34 Digit factorials
题意:判断一个数 N 的各个位数阶乘之和是否为其本身,找出所有符合要求的数然后求和 思路:此题思路跟 30 题相同,找到枚举上界 10 ^ n <= 9! × n ,符合要求的 n < 6 ...
- Ural 1996 Cipher Message 3 (生成函数+FFT)
题面传送门 题目大意:给你两个$01$串$a$和$b$,每$8$个字符为$1$组,每组的最后一个字符可以在$01$之间转换,求$b$成为$a$的一个子串所需的最少转换次数,以及此时是从哪开始匹配的. ...
- [luogu4037 JSOI2008] 魔兽地图 (树形dp)
传送门 Description DotR (Defense of the Robots) Allstars是一个风靡全球的魔兽地图,他的规则简单与同样流行的地图DotA (Defense of the ...
- Swoole 源码分析——基础模块之 Pipe 管道
前言 管道是进程间通信 IPC 的最基础的方式,管道有两种类型:命名管道和匿名管道,匿名管道专门用于具有血缘关系的进程之间,完成数据传递,命名管道可以用于任何两个进程之间.swoole 中的管道都是匿 ...
- Django入门--自定义过滤器与标签
---恢复内容开始--- 为了让Django找到自定义的模板过滤器和模板标签,需要进行文件路径配置,配置方式分为APP目录下配置和项目路径下配置两种方式: 1.在APP目录下配置:针对某个应用特定的自 ...
- Python中的全局变量与局部变量的区别
全局变量与局部变量两者的本质区别就是在于作用域 用通俗的话来理解的话, 全局变量是在整个py文件中声明,全局范围内都可以访问 局部变量是在某个函数中声明的,只能在该函数中调用它,如果试图在超出范围的地 ...
- 使用Spring Initializer快速创建Spring Boot项目
目录结构 IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目:选择我们需要的模块:向导会联网创建Spring Boot项目:默认生成的Spring Boot项目: 主程序 ...