layui中table表头样式修改

最新推荐文章于 2025-09-25 00:06:28 发布

原创最新推荐文章于 2025-09-25 00:06:28 发布 · 3.4w 阅读

10 ·

CC 4.0 BY-SA版权

LayUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用layui框架自定义表格表头的样式，包括背景颜色和文字颜色等属性，并展示了通过JavaScript代码实现这一功能的具体方法。

部署运行你感兴趣的模型镜像

layui中table表头样式修改

layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#desTable'
            , url: '${ctx}/alarm/queryEventShowScatter'
            , even: true
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }
            , cols: [[
                {field: 'id', width: '15%', title: '1', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'srcip', width: '15%', title: '2', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'logtime', width: '20%', title: '3', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'lasttime', width: '20%', title: '4', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'count', width: '15%', title: '5', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'percent', width: '15%', title: '6', style: 'background-color: #5FB878; color: #fff'}
            ]],
            done: function (res, curr, count) {
                $('tr').css({'background-color': '#009688', 'color': '#fff'});
            }

        });
    });

done:function()方法在加载完成时回调,用jquery修改样式.

您可能感兴趣的与本文相关的镜像