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;
    }
    

    效果图:

  • 相关阅读:
    flask总结02
    flask总结01
    恩智浦Freescale Cortex-A9 迅为IMX6开发板平台初体验
    [分享] IMX6嵌入式开发板linux QT挂载U盘及TF卡
    迅为4412嵌入式安卓开发板兼容3G网络|4G网络
    迅为嵌入式4412平台兼容3G/4G模块的安卓开发板
    飞思卡尔开发板-迅为IMX6开兼容单核 双核 四核Plus开发板
    物联网初学者智能家居必备迅为iTOP-4412开发板
    【分享】4412开发板POP烧写ubuntu出错,如何挂载emmc分区解决方法
    [安卓开发板]迅为IMX6 四核Android开发板
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9282815.html
Copyright © 2011-2022 走看看