代码内有注释
看效果:
## 以下是代码
//表格查询
function loadTable() {
let queryDepartmentId = $("#departmentId").val();
layui.table.render({
id: 'budgetTable'
, elem: '#budgetTable'
, url: '/'
, where: {token: token, companyId: companyId, departmentId: queryDepartmentId, year: year}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度
, totalRow: false //开启合计行
, height: ($(window).height() - 250)
, parseData: function (res) {
if (res.staCode == 200) {
return {
"code": 0, //解析接口状态
"msg": "", //解析提示文本
"count": res.t.length, //解析数据长度
"data": res.t //解析数据列表
};
}
}
, cols: [[
{field: 'IssuingDepartment', title: '下发部门', merge: true }
,{field: 'DEPARTMENT_NAME', title: '被下发部门'}
, {field: 'NM', title: '科目名称'}
, {field: 'MONEY', title: '金额',templet: function (res) {
return addIdentifier(res.MONEY);
}}
, {field: 'DESCRIPTION', title: '摘要'}
, {field: 'CREATE_DT',title: '操作时间'}
]]
, done: function (res) {
mergeRows(res)
}
})
}
function mergeRows(res, table) {
var data = res.data;
console.log(data)
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
var columsName = ['IssuingDepartment'];//需要合并的列名称
var columsIndex = [0];//需要合并的列索引值
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;
}
}