Layui table合并单元格

table.render({...
...
...
done: function (res, curr, count) {var columsName = ["De_Name", "Brand"];var columsIndex = [1, 2];var elem = "div[lay-id='dataTable_Client'] ";merge(res, columsName, columsIndex, elem);}
})

//合并单元格, elem 一个页面如果有多个表格可以指定某一个
function merge(res, columsName, columsIndex, elem) {if (elem === null) {elem = ".layui-table-body>.layui-table";} else {elem += ".layui-table-body>.layui-table";}var data = res.data;// 定位需要添加合并属性的行数var mergeIndex = 0;// 这里涉及到简单的运算，mark是计算每次需要合并的格子数var mark = 1;// 需要合并的列名称//var columsName = ['id', 'name']; // 需要合并的列索引值//var columsIndex = [0, 1];for (var k = 0; k < columsName.length; k++) {// 这里循环所有要合并的列var trArr = $(elem).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;}
}

Layui table合并单元格相关推荐

Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
element plus的table合并单元格
element的table合并单元格就element+中的el-table中的span-method方法的使用和遇到的一些问题如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
vue中用table_Vue中table合并单元格用法
地名结果人名性别 {{item.name}} 已完成未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
table合并单元格_制作课程表3——合并单元格
由于浏览器兼容问题,. 以及很少被使用, 所以我们将课程表依然使用tr.td元素,结合样式实现出前面案例中效果原来代码: 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课 ...
table合并单元格宽度自适应
table中合并单元格导致的css样式不同处理方式: 1.每行都拆成一个table. 2.多设置几个单元格的宽度(自适应失效.第一列都设置宽度也有可能失效).

Layui table合并单元格

Layui table合并单元格相关推荐

最新文章

热门文章