基于layui中table组件的数据表格单元格合并

layui.use(['table'], function () {
		var $ = layui.$, table = layui.table;
        var mergeColumns=['province','city'];//需要合并的列的field值，前面的包含后面
        var col=[
           {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'province', title: '省份', width:80}
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'sex', title: '性别', width:80, sort: true}
          ,{field: 'sign', title: '签名', width: 177}
          ,{field: 'experience', title: '积分', width: 80, sort: true}
          ,{field: 'score', title: '评分', width: 80, sort: true}
          ,{field: 'classify', title: '职业', width: 80}
          ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ];
        var tableSetting = {
			id: 'frame',
			page: true,
			limit: 20,
			loading: true,
			cellMinWidth: 100,
			url: '数据请求路径',
			elem: '#list-table',
			size: 'sm',
			cols: col,
			defaultToolbar: [],
			done: function (res, curr, count) {
				merge(res, curr, count,mergeColumns);
			}
		};

function merge(res, curr, count,mergeColumnKeyName) {
			var data = res.data;
			var mark = 1; //需要合并的格子数
			var columsName = mergeColumnKeyName;//需要合并的列名称
			var columsIndex=[];//获取需要合并的索引值
			var mergeHistory=[[]];//合并单元格信息
			var curentMergeRows=[];
			for (var ind = 0; ind < columsName.length; ind++){
				columsIndex[ind]=$("th[data-field="+columsName[ind]+"]")[0].cellIndex;
				mergeHistory[ind]=new Array();
			}
			var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
			for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
			{
                //预备合并起始行
				var rowSpanStart=trArr.eq(0).find("td").eq(columsIndex[k]);
				var displayRow=null;
				if (k){
					var history=mergeHistory[k-1];
				}
				for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    //获取当前行的当前列

					displayRow = trArr.eq(i).find("td").eq(columsIndex[k]);
                    //后一行的值与前一行的值做比较，相同就更新mark
					if (data[i][columsName[k]] === data[i - mark][columsName[k]]) { 
						mark += 1;
                   //当合并的不是第一列时，需约束当前列的行合并的格数不能大于前一列的行合并格数
						if (k) {
							var mergeRow=null;//离当前行最近的合并行（当前列与前一列相同的合并列）
							if (history[i - mark+1] === undefined){//与前一列合并起始行不相同
								var marks=0;
								for(var row=0, len = curentMergeRows.length ; row< len ; row++) {
									var value=curentMergeRows[row];
									marks+=mergeHistory[k][value];
									if (history[value] === undefined) {

									}else {//找到离当前行最近并且与前一列的合并行相同的合并行记录
										mergeRow=value;
										break;
									}
								}
								if (i != (res.data.length-1) && (mark+marks) === history[mergeRow] ){//当不是最后一行时（后面会处理最后一行的情况），并且与前一行数据相同时,应合并
									rowSpanStart.each(function () {//相同行的第一行增加rowspan属性
										$(this).attr("rowspan", mark);
									});
									mergeHistory[k][i - mark+1]=mark;//记录列、行的合并信息
									curentMergeRows.unshift(i - mark+1);//当前列的合并行信息，倒叙添加（从mergeHistory中获取需要进行倒序处理 在js中实现比较复杂（关联数组，且键为数字））
									i++;//此时，下一行即为预备合并起始行，不需要与上一行比较，跳一行
									rowSpanStart=trArr.eq(i).find("td").eq(columsIndex[k]);//重新设置预备合并起始行
									mark = 1;//每次合并结束，重置mark
								}
								displayRow.each(function () {//当前行隐藏
									$(this).css("display", "none");
								});
							} else{//与前一列合并起始行相同
								if (mark === history[i - mark+1]){//当合并格数达到前一列合并行格数时，添加rowspan
									rowSpanStart.each(function () {//相同列的第一列增加rowspan属性
										$(this).attr("rowspan", mark);
									});
									mergeHistory[k][i-mark+1]=mark;
									curentMergeRows.unshift(i - mark+1);
									i++;
									rowSpanStart=trArr.eq(i).find("td").eq(columsIndex[k]);
									mark = 1;//每次合并结束，重置mark
								}
								displayRow.each(function () {//当前行隐藏
										$(this).css("display", "none");
								});
							}
						}else {
							displayRow.each(function () {//当前行隐藏
								$(this).css("display", "none");
							});
						}
					}else {
						rowSpanStart.each(function () {//相同列的第一列增加rowspan属性
							$(this).attr("rowspan", mark);
						});
						curentMergeRows.unshift(i - mark);
						mergeHistory[k][i - mark]=mark;
						rowSpanStart=rowSpanStart=trArr.eq(i).find("td").eq(columsIndex[k]);
						mark = 1;//每次合并结束，重置mark
					}
					if (i === (res.data.length-1) && (mark-1)){//当处于最后一行时，并且与前一行数据相同时,应合并
						rowSpanStart.each(function () {//相同列的第一列增加rowspan属性
							$(this).attr("rowspan", mark);
						});
						mergeHistory[k][i - mark+1]=mark;
						curentMergeRows.unshift(i - mark+1);
						mark = 1;//每次合并结束，重置mark
					}
				}
				curentMergeRows=[];
				mark = 1;//每一列合并完成，重置mark
			}
		}

});