zoukankan      html  css  js  c++  java
  • 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;
    }
    

    效果图:

  • 相关阅读:
    关于Git的一些常规操作
    .Net 常用ORM框架对比:EF Core、FreeSql、SqlSuger (下篇)
    Myeclipse打开许多JSP文件或者js文件之后非常卡-------的解决办法
    单点登录常用生成token的操作-----UUID.randomUUID().toString() 简介
    如何使用时间复杂度和空间复杂度来区分算法的效率?
    自定义注解的简单使用
    企业中常用的Git和Svn比较。
    框架中常见的注解分析
    处理大数据流常用的三种Apache框架:Storm、Spark和Samza。(主要介绍Storm)
    养生食谱
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9282815.html
Copyright © 2011-2022 走看看