jqGrid 合并值相同的多行 - jeesite记录

原创已于 2022-04-28 16:43:03 修改 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

于 2022-04-28 16:14:24 首次发布

本文介绍如何使用jQuery Grid（jqGrid）实现当遇到数据中proName值重复时，合并显示行的功能，提高数据呈现的清晰度。通过遍历行数据，对比proName并调整单元格行高和隐藏重复单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqGrid 合并值相同的多行

jeesite

function setRowSpan () {
	var obj = $("#dataGrid");
	var rowIds = obj.getDataIDs(); 
	var count = 0;//要合并的单元格数
	var index = 0; //起始行数
	
	var rowData = obj.jqGrid('getRowData',rowIds[0]).proName;
	
	 if(rowIds.length > 1){
		$("tr[id^=subTotal]").css("background", "#E0E0E0");
		$("#total").css("background", "#1e90ff");
		for(var col = 1; col < rowIds.length; col ++){
			//获取成品名称
			var data = obj.jqGrid('getRowData',rowIds[col]).proName;
			if(rowData == data){
				//隐藏当前单元格hideCol
				$("#dataGrid tr:gt("+col+"):eq(0) td:eq(1)").hide();
				count ++;
				index ++;
			}else if(rowData != data){
				rowData = data;
				if(count > 0){
					//上面的行跨行
					$("#dataGrid tr:gt("+(col-count-1)+"):eq(0) td:eq(1)").attr("rowspan",count+1);
					//隐藏重复单元格
					//$("#dataGrid tr:gt("+(col-1)+"):eq(0) td:eq(1)").hide();
					count = 0;
				}
			}
		}
	} 
}