JQuery EasyUI DataGrid动态合并单元格

最新推荐文章于 2023-05-04 08:55:51 发布

转载最新推荐文章于 2023-05-04 08:55:51 发布 · 813 阅读

Javascript(JS) 同时被 3 个专栏收录

6 篇文章

订阅专栏

jQuery

5 篇文章

订阅专栏

Java

3 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript与EasyUIDataGrid组件动态合并表格单元格，包括函数实现步骤与实例演示。

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

HTML代码：

<div id="index_tabs_lygl" class="easyui-layout" data-options="fit:true,border:false">
  <div data-options="region:'center', border:false">
	<table id="test_datagrid_ssgl" data-options="onLoadSuccess:MergeCells"></table>
  </div>
</div>

JavaScript 代码：

        /**
	 * EasyUI DataGrid根据字段动态合并单元格
	 * @param fldList 要合并table的id
	 * @param fldList 要合并的列,用逗号分隔(例如："name,department,office");
	 */
	function MergeCells(tableID,fldList) {
		var tableID = "test_datagrid_ssgl";
		var fldList = "gameTime";
		var Arr = fldList.split(",");
		var dg = $('#' + tableID);
		var fldName;
		var RowCount = dg.datagrid("getRows").length;
		var span;
		var PerValue = "";
		var CurValue = "";
		var length = Arr.length - 1;
		for (i = length; i >= 0; i--) {
			fldName = Arr[i];
			PerValue = "";
			span = 1;
			for (row = 0; row <= RowCount; row++) {
				if (row == RowCount) {
					CurValue = "";
				} else {
					CurValue = dg.datagrid("getRows")[row][fldName];
					console.info(CurValue);
				}
				if (PerValue == CurValue) {
					span += 1;
				} else {
					var index = row - span;
					dg.datagrid('mergeCells', {
						index : index,
						field : fldName,
						rowspan : span,
						colspan : null
					});
					span = 1;
					PerValue = CurValue;
				}
			}
		}
	}