多种table列表合并列内容相同的单元格方法
html:
<table class="tablelist" id="tablelist">
js:
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
$("#tablelist").rowspan(0);//传入的参数是对应的列数从0开始 第一列合并相同
$("#tablelist").rowspan(1);//传入的参数是对应的列数从0开始 第二列合并相同
$("#tablelist").rowspan(2);//传入的参数是对应的列数从0开始 第二列合并相同
$("#tablelist").rowspan(12);//传入的参数是对应的列数从0开始 第二列合并相同
html:
<table class="layui-hide" id="dataList" lay-filter="dataList"></table>
js:
,done: function(res, curr, count){
merge(res);//调用
}
/**
* 合并单元格(列)
* @param res 表格数据
* @param curr 当前页
* @param count 总数
*/
function merge(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
var columsName = ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];//需要合并的列名称
var columsIndex = [1,2, 3, 4, 14, 15, 16,17, 18, 19, 20];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
}else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
html:
<el-table class="tablelist" :border="true" :data="detail.goodsList" :span-method="objectSpanMethod">
js:
// 合并同一列相同的内容
flitterData (arr) {
let spanOneArr = [],
spanTwoArr = [],
spanThreeArr = [],
spanFourArr = [],
spanThirteenArr = [],
concatOne = 0,
concatTwo = 0,
concatThree = 0,
concatFour = 0,
concatThirteen = 0;
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
spanTwoArr.push(1);
spanThreeArr.push(1);
spanFourArr.push(1);
spanThirteenArr.push(1);
} else {
if (item.sn === arr[index - 1].sn) { // 第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
};
if (item.ordersSn === arr[index - 1].ordersSn) { // 第二列需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
};
if (item.serviceSn === arr[index - 1].serviceSn) { // 第三列需合并相同内容的判断条件
spanThreeArr[concatThree] += 1
spanThreeArr.push(0)
} else {
spanThreeArr.push(1)
concatThree = index
};
if (item.institutesName === arr[index - 1].institutesName) { // 第四列需合并相同内容的判断条件
spanFourArr[concatFour] += 1
spanFourArr.push(0)
} else {
spanFourArr.push(1)
concatFour = index
};
if (item.addressName === arr[index - 1].addressName) { // 第14列需合并相同内容的判断条件
spanThirteenArr[concatThirteen] += 1
spanThirteenArr.push(0)
} else {
spanThirteenArr.push(1)
concatThirteen = index
};
}
});
return {
one: spanOneArr,
two: spanTwoArr,
three: spanThreeArr,
four: spanFourArr,
thirteen: spanThirteenArr
}
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
console.log({ row, column, rowIndex, columnIndex });
if (columnIndex === 0) { // 判断第一列
const _row = (this.flitterData(this.detail.goodsList).one)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 1) { // 判断第二列
const _row = (this.flitterData(this.detail.goodsList).two)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 2) { // 判断第三列
const _row = (this.flitterData(this.detail.goodsList).three)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 3) { // 判断第四列
const _row = (this.flitterData(this.detail.goodsList).four)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 12) { // 判断第13列
const _row = (this.flitterData(this.detail.goodsList).thirteen)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
};
}
},