需求說明：
在數據表字段的管理頁面中，因為是一張表對應多個字段，需要的是把數據庫類型和數據表名列合並成一個單元格，效果如下：
表格的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。