js心得-jquery EasyUI之datagrid合并单元格

最新推荐文章于 2023-10-14 15:17:11 发布

原创最新推荐文章于 2023-10-14 15:17:11 发布 · 7.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在datagrid中通过代码实现单元格合并，并针对特定情况进行了优化处理，包括行跨多行和列跨多列的操作。通过JSON字符串转换和对象隐藏功能，实现了灵活的单元格布局调整。

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

//datagrid合并单元格 代码浓缩
/*
合并单元格，options参数包含如下属性：
index：行索引。
field：字段名。
rowspan：整合单元格要跨的行数。
colspan：整合单元格要跨的列数。
*/

//没有处理之前

var mark = 0;
var rowspan_field = 'name';
var colspan_field = 'datetime';
for (var i=0; i <data.rows.length; i++) {
	if (data.rows[i][colspan_field] == null) {
		$(this).datagrid('mergeCells',{
			index: mark,
			field: rowspan_field,
			rowspan:i-mark
		});
		$(this).datagrid('mergeCells',{
			index: i,
			field: colspan_field,
			colspan:2
		});
		mark = i+1;
	}
	
}

//合并单元格效果后

//1、JSON字符串互相转换
var data = JSON.stringify(row);
var obj = JSON.parse(str);


//2、对象隐藏
$("#div_add").css("display","none");
$("#div_add").css("display","");


$("#div_add").hide();
$("#div_add").show();