easyUI datagarid单元格动态合并
2024-08-27 17:26:10
第二列根据第一列合并,第三列根据第二列合并。层级关系。
/*
* 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;
}
效果图:
最新文章
- .net windows Kafka 安装与使用入门(入门笔记)
- HTML 浏览器显示控制
- ASP.NET jquery.uploadify上传控件中文乱码解决办法(转)
- python 向上取整ceil 向下取整floor 四舍五入round
- 自旋锁-SpinLock(.NET 4.0+)
- Effective Java 18 Prefer interfaces to abstract classes
- solr性能调优
- ExtJS学习之路第一步:对比jQuery,认识ExtJS
- 预习 jQuary
- JAVA输入/输出系统中的其他流学习笔记
- js switch表达式的例子
- windows7 jdk 环境变量添加
- poi HSSFRichTextString 对cell中的每一段文字设置字体
- Xcode4.5 本地化,多语言设置
- linux下的二进制文件的编辑和查看
- Win10 教育版
- .Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title
- select2插件设置选中值并显示的问题
- ioncube 加密软件 linux 使用方法
- element-ui中使用font-awesome字体图标