layui-table中某一列是时间,如何进行格式化

在layui表格中,当某一列显示时间时,需要对从后台获取的fastTime格式时间进行格式化。可以通过layui的table列的templet属性结合JavaScript进行处理。首先,初始化表格数据,然后在templet中调用自定义的JavaScript函数,将原始时间转换为可读格式。要实现这一功能,需要引入时间格式化js库,并确保正确应用到表格的时间列,最终展示的效果会是用户友好的时间格式。
摘要由CSDN通过智能技术生成

首先加载layui的table很简单

<table id="demo" lay-filter="user"></table>

js初始化数据:

var sortTable = table.render({
            elem: '#demo',
            url: path,
            height: 550,
            cols: [[//标题栏
                      { field: 'rownum', title: '序号', width: 80, sort: false,fixed:false}      
                      ,{field: 'loginName', title: '账号', width: 100,sort: true,fixed:false}
                      ,{field: 'name', title: '用户名', width: 100,sort: true,fixed:false}
                      ,{field: 'email', title: '邮箱', width: 150,sort: true,fixed:false}
                      ,{field: 'mobile', title: '
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
可以使用 layui 的时间格式化工具 laytpl,具体步骤如下: 1. 在 layui.use 引入 laytpl 模块: ```javascript layui.use(['table', 'laytpl'], function(){ var table = layui.table; var laytpl = layui.laytpl; // ... }); ``` 2. 在 table.render 的 cols 设置 templet 属性,并使用 laytpl 进行格式化: ```javascript table.render({ elem: '#test', url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'email', title:'邮箱', width:150}, {field:'sign', title:'签名'}, {field:'sex', title:'性别', width:80}, {field:'city', title:'城市', width:100}, {field:'experience', title:'积分', width:80}, {field:'logins', title:'登入次数', width:100}, {field:'joinTime', title:'加入时间', width:120, templet: function(d){ return laytpl('{{ formatTime(d.joinTime) }}').render({ formatTime: function(time) { var date = new Date(time); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } }); }}, {field:'operate', title:'操作', width:150, toolbar: '#barDemo'} ]] }); ``` 在上面的代码,我们在加入时间这一使用了 laytpl,并传入了一个 formatTime 方法,该方法用于将时间格式化为指定的格式。在模板,我们使用 {{ formatTime(d.joinTime) }} 的方式调用该方法,其 d 是当前行的数据对象,joinTime 是该对象时间戳的属性名。 3. 编写模板: ```html <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` 在上面的代码,我们定义了一个操作,并使用了 layui 的模板语法。在模板,我们使用 lay-event 属性指定了点击事件的名称,并在 JS 监听该事件,从而实现相应的操作。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Phoenix_smf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值