- html代码
table style="width: 50%;" class="layui-hide" id="itemlib" lay-filter="itemlib"></table>
- Layui代码
function initActivity(){ table.render({ elem: '#itemlib', height: 'full-110' , url: '请求连接', //数据接口 page: false, //开启分页 limits: [50,200,500,1000], limit: 50, //每页数量 method:'post', where:{'_csrf-backend':"$_csrf"}, //请求参数 pageTabs: false, cols: [[ // {type:'checkbox'}, {field: 'type', title: '类型',width: 100,align:"center"}, {field: 'activity_name', title: '活动名称',width: 150,align:"center"}, {field: 'kingdom', title: '档位',width: 100,align:"center"}, {field: 'phylum', title: '数量',width: 100,align:"center"}, ]], //合并前两列相同数据 done:function(res) { layer.closeAll(); merge(res); } }); /** * 合并table列 * @param {Object} res */ function merge(res) { var data = res.data; var mergeIndex = 0; //定位需要添加合并属性的行数 var mark = 1; //每次需要合并的行数 var columsName = ["type",'activity_name']; //合并列名称 var columsIndex = [0,1]; //合并列索引值 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; } } }
layui数据表格合并列
于 2022-01-12 16:24:57 首次发布
该博客介绍了如何在layui框架下实现数据表格的列合并功能,通过javascript进行操作,详细讲解了相关html代码和layui代码的应用。
摘要由CSDN通过智能技术生成