jqgrid表格按等级合并

之前做过jqgrid的表格合并,但是只是很简单的相邻内容相同就合并的逻辑,然后现在我要做一个分级的合并功能,就是说将列认为的设置等级,只有上级相同的列名字相同才能合并。举个例子,我先按日期,机器,班次排序,然后合并日期,机器,班次,如果只是简单的相同内容就合并,可能会出现不同日期有着同一台机器合并的可能。废话不多说直接上代码。

//gridName表名
//CellName需要合并的列名(多个用,号隔开)
//mainId主列名(多个用,号隔开,前面的等级更高)
function MergerStatistics(gridName, CellName, mainId) {
    //得到显示到界面的id集合
    var mya = $("#" + gridName + "").getDataIDs();
    //当前显示多少条
    var length = mya.length;
        var cellNames = CellName.split(",");
        var multilevel = [];
        if(!!mainId)
        	multilevel = mainId.split(",");
        var originRowCount = {};
        $.each(cellNames,function(i,n){
	    $("#" + gridName + "").find("tr td[aria-describedby="+gridName+"_"+n+"]").show();
        	originRowCount[n] = 1;
        });
    for (var n = 0; n < cellNames.length; n++) {
	    for (var i = 0; i < length; i++) {
	        //从上到下获取一条信息
	        var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
	        before["gridMainId"] = gridMainId(before,multilevel);
	        //定义合并行数
	        var rowSpanTaxCount = 1;
	        var rowCount = $.extend({},originRowCount);
	        for (j = i + 1; j <= length; j++) {
	            //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
	            var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
	            end["gridMainId"] = gridMainId(end,multilevel);
	            //判断主列是否一致
                if (before[cellNames[n]] == end[cellNames[n]] && compareLevel(before,end,multilevel,cellNames[n])) {
                    rowSpanTaxCount++;
            		rowCount[cellNames[n]] = ++ rowCount[cellNames[n]];
                    $("#" + gridName + "").setCell(mya[j], cellNames[n], '', { display: 'none' });
    	                //$("#" + cellNames[n] + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);//最后合并需要合并的行与合并的行数
    	            
                } else {
                    break;
                }
	        }
 	        $("#"+ gridName + " tr:eq(" + (i+1) + ") td[aria-describedby="+gridName+"_"+cellNames[n]+"]").attr("rowspan", rowCount[cellNames[n]]);//最后合并需要合并的行与合并的行数
            rowSpanTaxCount = 1;
	    }
    }
}
//拼接所有主列的值
function gridMainId(rowData,multilevel){
   var gridMainId = "";
   for(var i in multilevel){
	   gridMainId += rowData[multilevel[i]]+";";
   }
   return gridMainId;
}
//比较主列是否一致
function compareLevel(before,end,multilevel,key){
   if(multilevel.length == 0)
	   return true;
   var level = multilevel.indexOf(key);
   var flag = true;
   if(level < 0){//如果合并列不属于主列,那么需要所有主列一致才能合并
	   if(before["gridMainId"] != end["gridMainId"])
		   flag = false;
   }else{
	   for(var i=0;i<level;i++){//如果合并列属于主列,那么需要更高的主列相等才能合并
		   if(before[multilevel[i]] != end[multilevel[i]]){
			   flag = false;
			   break;
		   }
	   }
   }
   return flag;
}

在表格生成以后调用一下MergerStatistics(gridName, CellName, mainId)就好了。比如jqgrid的loadComplete方法。


需求有加了一个就是多个列要同时相同才能合并,比如说同一台机器在同一天的数据才能合并,所以增加了同级功能

	//gridName表名
	//CellName需要合并的列名(多个用,号隔开)
	//mainId主列名(多个用,号隔开,前面的等级更高,同级的列用&连接)
	function MergerStatistics(gridName, CellName, mainId) {
		var start = new Date();
		//得到显示到界面的id集合
		var mya = $("#" + gridName + "").getDataIDs();
		//当前显示多少条
		var length = mya.length;
		var cellNames = CellName.split(",");
		var multilevel = [];//字段的顺序代表着等级高低,同级的字段用&连接
		var keyLevelMap = {};//保存字段对应的等级
		if (!!mainId){
			multilevel = mainId.split(",");
			for(var i in multilevel){
				var key = multilevel[i];
				if(key.indexOf("&") > 0){//用&连接的字段属于同一级
					var keys = key.split("&");
					var value = "";
					for(var j in keys){
						keyLevelMap[keys[j]] = i;
					}
				}else{
					keyLevelMap[key] = i;
				}
			}
		}
		var originRowCount = {};
		$.each(cellNames, function (i, n) {
			$("#" + gridName + "").find("tr td[aria-describedby=" + gridName + "_" + n + "]").show();
			originRowCount[n] = 1;
		});
		for (var n = 0; n < cellNames.length; n++) {
			for (var i = 0; i < length; i++) {
				//从上到下获取一条信息
				var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
				gridMainId(before, multilevel);
				//定义合并行数
				var rowSpanTaxCount = 1;
				var rowCount = $.extend({}, originRowCount);
				for (j = i + 1; j <= length; j++) {
					//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
					var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
					gridMainId(end, multilevel);
					//判断主列是否一致
					if (before[cellNames[n]] == end[cellNames[n]] && compareLevel(before, end, multilevel, keyLevelMap, cellNames[n])) {
						rowSpanTaxCount++;
						rowCount[cellNames[n]] = ++rowCount[cellNames[n]];
						$("#" + gridName + "").setCell(mya[j], cellNames[n], '', { display: 'none' });
						//$("#" + cellNames[n] + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);//最后合并需要合并的行与合并的行数

					} else {
						break;
					}
				}
				$("#" + gridName + " tr:eq(" + (i + 1) + ") td[aria-describedby=" + gridName + "_" + cellNames[n] + "]").attr("rowspan", rowCount[cellNames[n]]);//最后合并需要合并的行与合并的行数
				rowSpanTaxCount = 1;
			}
		}
		console.log("new消耗时间:" + (new Date() - start));
	}
	//拼接所有主列的值
	function gridMainId(rowData, multilevel) {
		var gridMainId = "";
		for (var i in multilevel) {
			var key = multilevel[i];
			if(key.indexOf("&") > 0){
				var keys = key.split("&");
				var value = "";
				for(var j in keys){//用&连接的字段属于同一级
					value += rowData[keys[j]]+";";
					gridMainId += rowData[keys[j]]+";";
				}
				rowData[key] = value;//拼接用&连接的字段值
			}else{
				gridMainId += rowData[key] + ";";
			}
		}
		rowData["gridMainId"] = gridMainId;
	}
	//比较主列是否一致
	function compareLevel(before, end, multilevel, keyLevelMap, key) {
		if (multilevel.length == 0)
			return true;
		var level = keyLevelMap[key];
		var flag = true;
		if (level == undefined) {//如果合并列不属于主列,那么需要所有主列一致才能合并
			if (before["gridMainId"] != end["gridMainId"])
				flag = false;
		} else {
			for (var i = 0; i <= level; i++) {//如果合并列属于主列,那么需要更高的主列相等才能合并
				if (before[multilevel[i]] != end[multilevel[i]]) {
					flag = false;
					break;
				}
			}
		}
		return flag;
	}

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值