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]);//后一行的值与前一行的值做比较，相同就更新markif (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]){//当合并格数达到前一列合并行格数时，添加rowspanrowSpanStart.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}}});
