【开发笔记】使用easyUI DataGrid绑定本地数据，并合并列相同行的字段

最新推荐文章于 2025-08-22 10:45:57 发布

原创最新推荐文章于 2025-08-22 10:45:57 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JS #easyUI #表格合并

Web前端专栏收录该内容

11 篇文章

订阅专栏

这篇开发笔记详细介绍了如何使用easyUI的DataGrid组件绑定本地数据，并实现表格中相同行字段的合并。通过HTML和JS代码示例，展示了从数据绑定到列合并的完整过程，特别强调了mergeCellsByField()函数在数据绑定后调用以完成表格的动态合并效果。

看标题有点绕，好吧，那就先上结果图

这就是最终的结果图，那我们一步一步来

先实现绑定数据

HTLM

<table id="WJDCReport" class="easyui-datagrid" style="width:auto;" toolbar="#toolbar" data-options="nowrap: false">
                    <thead>
                        <tr>
                            <th data-options="field:'Title', width:100">问卷问题</th>
                            <th data-options="field:'OptionValue', width:100">问卷选项</th>
                            <th data-options="field:'Answer', width:100">文本内容</th>
                            <th data-options="field:'NickName', width:100">微信昵称</th>
                            <th data-options="field:'CommunityName', width:100">小区</th>
                            <th data-options="field:'BuildName', width:100">楼宇</th>
                            <th data-options="field:'UnitName', width:100">单元</th>
                            <th data-options="field:'RoomNumber', width:100">房号</th>
                            <th data-options="field:'CustomerName', width:100">业主姓名</th>
                            <th data-options="field:'CustomerPhone', width:100">业主电话</th>
                        </tr>
                    </thead>
                </table>

JS绑定本地数据，因为我是先请求过来的数据，自己处理了，所以使用本地绑定的方法

当然，也可以百度去研究动态绑定，这都不是重点

$("#WJDCReport").datagrid(
                    'loadData', tableData
                );

先看这一步操作后的结果

重点来啦！！！！

绑定完数据后，就跟上图一样，我们要进行相同行的合并，得到最终的结果

那我就直接附上完整的代码

mergeCellsByField() 可以直接用，在绑定数据后，直接调用即可

function reportTableData(tableData) {
		// 绑定数据
		$("#WJDCReport").datagrid(
			'loadData', tableData
		);
		// 合并
		mergeCellsByField("WJDCReport", "Title,OptionValue");
	}
}
/**
 * EasyUI DataGrid根据字段动态合并单元格
 * 参数 tableID 要合并table的id 不要#
 * 参数 colList 要合并的列,用逗号分隔(例如："name,department,office");
 */
function mergeCellsByField(tableID, colList) {
	var ColArray = colList.split(",");
	var tTable = $("#" + tableID);
	var TableRowCnts = tTable.datagrid("getRows").length;
	var tmpA;
	var tmpB;
	var PerTxt = "";
	var CurTxt = "";
	var alertStr = "";
	for (j = ColArray.length - 1; j >= 0; j--) {
		PerTxt = "";
		tmpA = 1;
		tmpB = 0;

		for (i = 0; i <= TableRowCnts; i++) {
			if (i == TableRowCnts) {
				CurTxt = "";
			}
			else {
				CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
			}
			if (PerTxt == CurTxt) {
				tmpA += 1;
			}
			else {
				tmpB += tmpA;

				tTable.datagrid("mergeCells", {
					index: i - tmpA,
					field: ColArray[j],　　//合并字段
					rowspan: tmpA,
					colspan: null
				});
				tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
					index: i - tmpA,
					field: "Ideparture",
					rowspan: tmpA,
					colspan: null
				});

				tmpA = 1;
			}
			PerTxt = CurTxt;
		}
	}
}

最终结果就是本文开始的结果图，这个合并数据是在表格绑定之后调用的

因此，动态加载也可以这样子来合并表格