layui 列合并相同内容
table.render({ elem: '#tbdata', method: 'post', data: jsonData, height: temphei, limit: 20, limits: [10, 20, 30, 50, 100, 300, 500], id: "tbdata", toolbar: "#tbdatabar", text: { none: '暂无相关数据' }, cols: [ [{ field: "number", title: "序号", width: "6%", align: "left", templet: function(data) { return data.LAY_INDEX } } , { field: 'bh', title: '<span style=\'color:#c00\'></span>test1', width: '15%', templet: function(res) { return ' ' + '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="pmfabh">' + res.pmfabh + '</button>' ; } } , { field: "createtime", title: "创建时间", width: "10%", align: "left" } ] ], page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 , groups: 10 //只显示 1 个连续页码 /* , first: false //不显示首页 , last: false //不显示尾页*/ }, done: function(res) { //当数据渲染完后,执行的回调 //设置背景颜色 layer.closeAll(); merge(res); } //,skin:'line'//设置表格边框 line: 行边框风格 row:列边框风格 nob:无边框风格 , size: 'sm' //设置表格尺寸 sm: 小尺寸 lg: 大尺寸 });
方法:
/** 相同内容合并 * @param {Object} res */ function merge(res) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数 var columsName = ['bh'];//需要合并的列名称 var columsIndex = [1,2];//需要合并的列索引值 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; } }
效果:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现