1、字体颜色设置,最简单的办法

   style:'color: #f6d06'

,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}

2、给列设置背景色

 
  done: function (res, curr, count) {
           var that = this.elem.next();
           res.data.forEach(function (item, index) {
            // 所需的条件
              if(item.shouldMonth > 0){
            // 添加颜色--#1E9FFF ;'threeMonth'根据需要填充背景色的field进行更改
                that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='threeMonth']").css("background-color", "#1E9FFF");
            }
           });}
 
 
 

表格渲染代码

/* 疑问:想在最后加一列备注,合并4行,但是失败,样式会乱,如果加在供应商名称后,就没问题*/
            table.render({
                elem: '#tableList'
                ,url:'${pageContext.request.contextPath }/kanban/piLiangChaiXiangKanBan.do'
                ,id :'contentTable'
                ,totalRow: true //开启合计行
                ,page : false
                ,height : 600
                ,cols: [
                    [
                        {title:'序号',width: 50,type:'numbers', align:'center', rowspan: 4}
                        ,{field: 'customer_name', title:'供应商名称', width:'150', align:'center', rowspan: 4, totalRowText: '合计:'}
                        ,{title:'倒箱品库存现况', align:'center', colspan: 14}
                        ,{title:'倒箱品作业现况', align:'center', colspan: 6}

                    ],
                    [
                        {title:'库存', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'日发货计划', align:'center', colspan: 8}
                        ,{title:'下趟数', align:'center', colspan: 4}
                        ,{title:'今日计划', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'完成数', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'未完成', align:'center', rowspan: 2, colspan: 2}
                    ],
                    [
                        {title:'计划总数', align:'center', colspan: 2}
                        ,{title:'已发货', align:'center', colspan: 2}
                        ,{title:'未发货', align:'center', colspan: 2}
                        ,{title:'差额', align:'center', colspan: 2}
                        ,{title:'计划总数', align:'center', colspan: 2}
                        ,{title:'差额', align:'center', colspan: 2}
                    ],
                    [
                        {field: 'wuLiaoKuCun',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiKuCun',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoJiHuaFaHuo',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiJiHuaFaHuo',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoYiFa',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiYiFa',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoWeiFa',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiWeiFa',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
                        ,{field: 'wuLiaoXiaGeJiHua',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiXiaGeJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoXiaGeJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiXiaGeJiHuaCha',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiJiHua',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiChaiJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiYiZuo',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiChaiYiZuo',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiWeiZuo',title: '物料',align:'center', width:'80',style:'color: #f67d06;', totalRow: true}
                        ,{field: 'rongQiChaiWeiZuo',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
                    ]
                ]
                ,done : function(res, curr, count){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold'
                    });
                    var divArr = $(".layui-table-total div.layui-table-cell");
                    $.each(divArr,function (index,item) {
                        var _div = $(item);
                        var content = _div.html();
                        content = content.replace(".00","");
                        _div.html(content);
                    });
                    var that = this.elem.next();
                    res.data.forEach(function (item, index) {
                        // 所需的条件
                        if(item.wuLiaoJiHuaCha > 0){
                            // 添加颜色--#1E9FFF ;'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoJiHuaCha']").css("background-color", "#1E9FFF");
                        }
                        if(item.wuLiaoChaiWeiZuo > 0){
                            // 添加颜色--#1E9FFF ;'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoChaiWeiZuo']").css("background-color", "#1E9FFF");
                        }
                    });
                }
            });

效果截图

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐