easyui-datagrid根据数据的分组进行自动合并行

原创已于 2024-06-06 16:01:38 修改 · 964 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端 #javascript

于 2021-04-24 08:25:21 首次发布

easyui-datagrid 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使用JavaScript处理数据数组，通过遍历和比较`ordernumber`来合并Datagrid中的行。当`projectname`改变时，或者在数组开始时，将索引数据推送到`merges`数组中。之后，使用`datagrid('mergeCells')`方法对'xxx'和'xxx2'字段进行行合并，实现了数据表格的行合并功能。

function loadingthisData(data){
	if(data.rows != null){//data.rows是数据数组
		var merges =[{}]
		data.rows.forEach(function(object,index,array){//object数据对象,index数组下标,array当前循环的数组
			var indexData = {};
			var count=0;
			array.forEach(function(object2,index2,array2){
				if(object2.ordernumber == object.ordernumber){
					count++;
					indexData.index = index;
					indexData.rowspan = count;
				}
			})
			if(index != 0 && object.projectname != array[index-1].projectname){
				merges.push(indexData)
			}else{
				if(index == 0){
					merges.push(indexData)
				}
			}
		})
		merges.splice(0,1)
		for(var i=0; i<merges.length; i++){
			$("#Datagrid").datagrid('mergeCells',{
				index: merges[i].index,
				field: 'xxx',//根据xxx字段列进行分组
				rowspan: merges[i].rowspan
			});
			$("#Datagrid").datagrid('mergeCells',{//根据多列条件合并行
				index: merges[i].index,
				field: 'xxx2',//根据xxx2字段列进行分组
				rowspan: merges[i].rowspan
			});
		}
	}
}