需求说明：
在数据表字段的管理页面中，因为是一张表对应多个字段，需要的是把数据库类型和数据表名列合并成一个单元格，效果如下：
表格的option：
1 { 2 id: id, 3 elem: elem 4 //, height: 500 5 , toolbar: 'default' 6 , url: url //数据接口 7 , done: function (res, curr, count) { // 重点在此处，增加done之后的执行函数，调用外面定义的merge函数 8 merge(res); 9 } 10 , page: { 11 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 12 //,curr: 5 // 设定初始在第 5 页 13 , groups: 5 // 只显示 1 个连续页码 14 , first: '首页' // 不显示首页 15 , last: '尾页' // 不显示尾页 16 } 17 , cols: [[ 18 {type: 'checkbox', fixed: 'left'}, 19 {field: 'id_i', width: '5%', title: '序号', align: 'center', fixed: 'left'} 20 , {field: 'database_type', width: '10%', title: '数据库类型', align: 'center'} 21 , {field: 'table_name', width: '15%', title: '数据表名', align: 'center'} 22 , {field: 'field_name', width: '12%', title: '字段名', align: 'center'} 23 , {field: 'field_type', width: '10%', title: '字段类型', align: 'center'} 24 , {field: 'field_name_cn', width: '15%', title: '字段中文简称', align: 'center'} 25 , {field: 'empty', width: '10%', title: '是否为空', align: 'center'} 26 , {field: 'is_primary_key', width: '10%', title: '是否主键', align: 'center'} 27 , { 28 fixed: 'right', 29 title: '操作', 30 width: '120', 31 field: 'status', 32 align: 'center', 33 templet: function (d) { 34 let state = ""; 35 if (d.status === "on") state = "<input type='checkbox' value='" + d.table_name + "||" + d.field_name + "' id='status' lay-filter='stat' checked='checked' name='status' lay-skin='switch' lay-text='启用|停用' >"; 36 else state = "<input type='checkbox' value='" + d.table_name + "||" + d.field_name + "' id='status' lay-filter='stat' name='status' lay-skin='switch' lay-text='启用|停用' >"; 37 return state; 38 } 39 } 40 ]] 41 }
table.render()渲染表格时在option对象中增加一个done回调函数，在回调函数中调用外面定义的merge函数。
merge函数：
1 function merge(res) { 2 var data = res.data; 3 var mergeIndex = 0;//定位需要添加合并属性的行数 4 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 5 var columsName = ['database_type','table_name'];// 需要合并的列名称 6 var columsIndex = [2,3];//需要合并的列索引值 7 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列 8 var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行 9 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据 10 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列 11 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列 12 13 if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并 14 mark += 1; 15 tdPreArr.each(function () {//相同列的第一列增加rowspan属性 16 $(this).attr("rowspan", mark); 17 }); 18 tdCurArr.each(function () {//当前行隐藏 19 $(this).css("display", "none"); 20 }); 21 }else { 22 mergeIndex = i; 23 mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算 24 } 25 } 26 mergeIndex = 0; 27 mark = 1; 28 } 29 }
注意：merge函数需要更改的地方有两个，第5行和第6行需要更改，第5行 var columsName = ['database_type','table_name']; 是需要合并的列的名称，也就是option对象中的col里面的field； 第6行 var columsIndex = [2,3]; 是需要合并的列索引，从0开始数，也是数option对象中的col的列数，我这里应该是第3列和第4列，索引是2和3。