layui框架Table的样式设置

最新推荐文章于 2025-06-02 12:40:10 发布

原创最新推荐文章于 2025-06-02 12:40:10 发布 · 8.9k 阅读

8 ·

CC 4.0 BY-SA版权

前端框架专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍layui表格组件的高级配置方法，包括列隐藏、字体样式设置、时间格式化及自定义事件处理，旨在帮助开发者掌握更复杂的表格展示与交互技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

        var Columns = [
             { field: 'Id', title: 'ID' } //该列一会隐藏掉
             , { field: 'field1', title: '列1', width: 100, align: 'center', style: 'color:black;font-weight:bold;font-size:medium' }//style用于设置该列的字体样式，不包括表头
             , { field: 'field2', title: '列2', width: 180, align: 'center' }
             , { field: 'field3', title: '列3',  align: 'center' ,templet: '<div><a  class="layui-table-link" lay-event="detail"  title="{{d.' + "field3" + '}}">{{d.' + "field3" + '==null?"":d.' + "field3" + '}}</a></div>' }
             , { field: 'field4', title: '列4', width: 100, align: 'center'
             , { field: 'ServiceDate', title: '时间', width: 120, align: 'center', templet: '<div>{{Format(d.ServiceDate,"yyyy-MM-dd")}}</div>', style: 'color:black;font-weight:bold;font-size:medium' } //用于设置时间格式
               }
    ];

        table.render({
            elem: '#tableInfo',
            url: '',//获得返回Json数据的方法
            page: true,//控制分页
            //even: true,//控制隔行变颜色
            width: "atuo",//控制table的宽度
            cellMinWidth: 450,//在cols未设置宽度的列，最小的宽度
            loading: true,
            limit: 10,//控制每页显示的数据数量，类型为Number
            //limits: [5,10,15],//控制多少条每页中的数量，类型为Array
            id: 'tableInfo',//table的id
            cols: [Columns] //table的列
            , done: function () {
                $("[data-field='Id']").css('display', 'none');//table加载完后的回调方法，此处是将id列隐藏掉
                $('th').css({ 'color': 'black', 'font-weight': 'bold', 'font-size': 'medium' })//用于设置表头的样式，th即代表表头

            }
        });

        table.on('tool(tableList)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent == 'detail') {
                common.cmsLayOpen('查看', "/Page.aspx?Id=" + data.Id, '100%', '100%'); //点击某一列打开新的页面
            }
        });
    });

//设置时间格式的方法
function Format(datetime, fmt) {
    if (datetime == null || datetime == undefined || datetime == "") {
        return "";
    }
    if (parseInt(datetime) == datetime) {
        if (datetime.length == 10) {
            datetime = parseInt(datetime) * 1000;
        } else if (datetime.length == 13) {
            datetime = parseInt(datetime);
        }
    }
    datetime = new Date(datetime);
    var o = {
        "M+": datetime.getMonth() + 1,                 //月份   
        "d+": datetime.getDate(),                    //日   
        "h+": datetime.getHours(),                   //小时   
        "m+": datetime.getMinutes(),                 //分   
        "s+": datetime.getSeconds(),                 //秒   
        "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度   
        "S": datetime.getMilliseconds()             //毫秒   
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

    return fmt;
}