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

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

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

先实现绑定数据

HTLM

                    

                        

                            
问卷问题
                            
问卷选项
                            
文本内容
                            
微信昵称
                            
小区
                            
楼宇
                            
单元
                            
房号
                            
业主姓名
                            
业主电话
                        
                    
                

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;
		}
	}
}

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

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