layui实现表格合并单元格，设置不同背景色

最近在使用layui的过程中，遇到了表格合并单元格，设置不同背景色的问题。

在此总结，大家一起学习。

同一组新闻的底色相同，效果如下：

实现代码：

<script>layui.config({base: '/static/' //静态资源所在路径}).extend({index: 'admin/lib/index' //主入口模块}).use(['index','table','layer','form','tableMerge','jquery'],function(){var table = layui.table;var form = layui.form;var layer = layui.layer;var $ = layui.$;var tableMerge = layui.tableMerge;//同组新闻同一个颜色var renderBg=function(trList){var isExsitFun=function(allTrArr,trId,trItem){for(var j=0;j<allTrArr.length;j++){var allItem = allTrArr[j];for(var k=0;k<allItem.length;k++){if(allItem[k].find("td:first-child").text()==trId){allItem.push(trItem);return false;}} } return true;}var groupList=function(trList){var allTrArr=[];for(var i=0;i<trList.length;i++){var trItemArr=[];var trItem = $(trList[i]);var trId = trItem.find("td:first-child").text();if(isExsitFun(allTrArr,trId,trItem)){trItemArr.push(trItem)allTrArr.push(trItemArr)};}   return allTrArr;}var rendTrBg=function(group,color){for(var l=0;l<group.length;l++){let groupItem = group[l];groupItem.css('background-color',color)}}var allGroupTrArr = groupList(trList);for(var m=0;m<allGroupTrArr.length;m++){let group = allGroupTrArr[m];if(m%2==0){rendTrBg(group,'#eaf5f8')}else{rendTrBg(group,'#fff')}}}//表單渲染table.render({elem: '#draftList',height: 550,url: '/xxx/xxx.json',request: {pageName: 'page' //页码的参数名称，默认：page,limitName: 'pageSize' //每页数据量的参数名，默认：limit},page: true,cols: [[{field:'id', title:'ID', width:80, fixed: 'left'},{field:'title', title:'标题'},{field:'createUser', title:'作者',merge: 'id', width:150}  // 根据 当前列 相同值 的自动合并,{templet:'#updateTime', title:'更新时间',merge: 'id', width:188} // 根据 当前列 相同值 的自动合并,{templet:'#createTime', title:'保存时间',merge: 'id', width:188} // 根据 当前列 相同值 的自动合并,{title:'操作', merge: 'id',width:200, align:'center', toolbar: '#barDemo'}]],id:'draftList',done: function(){tableMerge.render(this);var trList = this.elem.next().find('tbody tr');renderBg(trList);}});
});
</script>

最近开发了一款移动办公软件狐小E

狐小E，企业数字化建设的全景攻略

layui实现表格合并单元格，设置不同背景色相关推荐

Markdown表格—合并单元格—设置单元格颜色
Markdown表格设计 ~~~~~~~我之前做表格遇到一些问题,特别是两个小表格想要放在同一行,却不行,所以想着要合并单元格.但是多个表格合并和想要分割线却没有,只好用颜色代替了.但是Markdow ...
layui 动态表格合并单元格
效果图代码放置位置 done : function(res, curr, count) {merge(res);}function merge(res) {var data = res.data;v ...
layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...
记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...

layui实现表格合并单元格，设置不同背景色

layui实现表格合并单元格，设置不同背景色相关推荐

最新文章

热门文章