datagrid 动态合并行

最新推荐文章于 2025-11-15 22:47:32 发布

原创最新推荐文章于 2025-11-15 22:47:32 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #easyui #动态合并 #合并行

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用easyUIDataGrid组件动态合并行，并解决子列跨父列合并的问题，提供了完整的实现代码及优化策略。

easyui datagrid 需要动态合并行，可以考虑在加载完数据之后按照文本合并

$('#datagrid').datagrid({    
			    method:"post",
			    loadMsg:'数据加载中请稍后……',
			    pagination:false,
			    rownumbers:false, 
			    resizable:true,
			    fitColumns:true,
			    nowrap:true,
			    singleSelect:true,
		        striped : true,
		        data:data,
			    columns:[[
			        // ...
			    ]],
			    onLoadSuccess:function (data){
			    	console.log(data);
				    	if(data.rows.length>0){
				    		mergeCell("datagrid","colName1,colName2");
				    	}
			    	} 
			});
		}

加载之后对传入的列动态合并

		function mergeCell(dgId,fields){
			var fieldArray=fields.split(",");
			var dg=$('#' + dgId);
			var rowCount=dg.datagrid("getRows").length;
			for (var i = 0; i < fieldArray.length; i++) {
				var begin=0;
				var length=0;
				var perTxt="";
				var curTxt="";
				var field = fieldArray[i];
				for (var j = 0; j < rowCount; j++) {
					curTxt=dg.datagrid("getRows")[j][field];
					if (curTxt==perTxt) {
						length++;
					}else if(length==0){
						begin++;
					}
					if ((curTxt!=perTxt&&length!=0)||(curTxt==perTxt&&j==rowCount-1)) {
						dg.datagrid("mergeCells",{
							index: begin-1,
		                    field: field,
		                    rowspan: length+1,
		                    colspan: null
						});
						begin+=(length+1);
						length=0;
					}
					perTxt=curTxt;
				}
			}
		}

后面发现下面情况子列会跨父列合并：

1	2	4
1	2	5
1	3	5

希望不要合并 5，修改代码如下：

function mergeCell(dgId,fields){
			var fieldArray=fields.split(",");
			var dg=$('#' + dgId);
			var rowCount=dg.datagrid("getRows").length;
			for (var i = 0; i < fieldArray.length; i++) {
				var begin=0;
				var length=0;
				var perTxt="";
				var curTxt="";
				var field = fieldArray[i];
				for (var j = 0; j < rowCount; j++) {
					curTxt="";
					for (var k = 0; k <= i; k++) {
						curTxt+=dg.datagrid("getRows")[j][fieldArray[k]];
					}
					if (curTxt==perTxt) {
						length++;
					}else if(length==0){
						begin++;
					}
					if ((curTxt!=perTxt&&length!=0)||(curTxt==perTxt&&j==rowCount-1)) {
						dg.datagrid("mergeCells",{
							index: begin-1,
		                    field: field,
		                    rowspan: length+1,
		                    colspan: null
						});
						begin+=(length+1);
						length=0;
					}
					perTxt=curTxt;
				}
			}
		}