layui框架Table的样式设置

本文详细介绍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;
}

 

### Layui 框架 Table 组件使用方法 #### 初始化表格组件 为了初始化一个表格,首先需要引入必要的资源文件并创建基础结构。HTML 需要包含一个具有特定 `id` 和 `lay-filter` 属性的 `<table>` 元素[^4]。 ```html <table id="EditListTable" lay-filter="demo"></table> ``` 接着,在 JavaScript 中可以通过调用 `layui.use()` 来加载所需的模块,并利用 `table.render()` 函数来设置表格的具体参数和行为: ```javascript layui.use(['table'], function(){ var table = layui.table; // 渲染表格实例 table.render({ elem: '#EditListTable' // 表格容器的选择器 ,height: 312 // 设置高度 ,url:'/data.json' // 数据接口地址 ,cols:[[ {field:'id', title:'ID'} ,{field:'username', title:'用户名'} ,{fixed: 'right', width: 180, align:'center', toolbar:'#barDemo'} // 工具栏 ]] ,page:true // 开启分页功能 }); }); ``` 此代码片段展示了如何通过指定的数据源 URL 加载远程 JSON 数据到表格中,并设置了表头字段以及开启了分页选项。 #### 定义工具条事件处理程序 对于每行记录的操作按钮(如编辑或删除),可以定义相应的点击事件处理器。这通常是在页面加载完成后立即完成的工作之一: ```javascript // 监听工具条事件 table.on('tool(demo)', function(obj){ var data = obj.data; // 获取当前行数据 if (obj.event === 'edit'){ layer.prompt({title: '修改 ID'+ data.id +' 的备注', value: data.remark}, function(value, index){ obj.update({remark:value}); // 更新对应单元格的内容 layer.close(index); }); } else if (obj.event === 'del'){ layer.confirm('真的删除么?', function(index){ obj.del(); // 删除对应的行 layer.close(index); }); } }); ``` 这段脚本实现了当用户点击某一行上的 "编辑" 或者 "删除" 图标时触发相应动作的功能。 #### 动态配置项组合方式 有时可能希望某些配置来自 HTML 源码而其他部分则由 JavaScript 提供。这种情况下可以直接在原始 `<table>` 标签内嵌入一部分配置信息,剩余的部分再经由 JavaScript 脚本来补充完整[^3]。 例如,在 HTML 文件里预先设定好一些固定的样式类名或者其他静态属性;而在 JS 方面,则负责动态调整那些依赖于运行环境变化较大的逻辑控制变量等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值