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

最新推荐文章于 2022-02-04 20:35:52 发布

置顶 Phoenix_smf

最新推荐文章于 2022-02-04 20:35:52 发布

阅读量3.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Layui 文章标签： layui table 时间格式化

本文链接：https://blog.youkuaiyun.com/Phoenix_smf/article/details/79570435

Layui 专栏收录该内容

2 篇文章

订阅专栏

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

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

首先加载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: '手机号', width: 150,sort: true,fixed:false} 
                      ,{field: 'status', title: '状态', width: 80,sort: true,fixed:false}
                      ,{field: 'createTime', title: '创建时间', width: 200, sort: false,fixed:false,templet:'#createTime'}
                      ,{field: 'do',title: '操作',width: 150,sort: false,fixed: false,
                        templet: templet
                    }
                ]],
            skin: 'line' //表格风格
            ,even: true
            ,page: true //是否显示分页
            ,limit: 10 //每页默认显示的数量
            ,limits:[10,20,50]
            //数据回调
            ,done: function (res, curr, count) {
            $(".layui-table").css({
                "border": "1px solid #e2e2e2",
                "border-top": "none",
                "width": "100%"
            });
            $("thead").css("border-top", "1px solid #e2e2e2");
          }  
        });

从上面可以看到有一列创建时间，java从后台传过来的时间格式是：fastTime格式的需要格式化。
layui的table列使用templet替换默认传来的数据，然后通过吧数据传给js格式化后再将返回的数据加载到table中。
使用js进行格式化：

要引入这个js:

//对Date的扩展，将 Date 转化为指定格式的String   
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
//例子：   
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18   
Date.prototype.Format = function(fmt)   
{ //author: meizz   
var o = {   
 "M+" : this.getMonth()+1,                 //月份   
 "d+" : this.getDate(),                    //日   
 "h+" : this.getHours(),                   //小时   
 "m+" : this.getMinutes(),                 //分   
 "s+" : this.getSeconds(),                 //秒   
 "q+" : Math.floor((this.getMonth()+3)/3), //季度   
 "S"  : this.getMilliseconds()             //毫秒   
};   
if(/(y+)/.test(fmt))   
 fmt=fmt.replace(RegExp.$1, (this.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;   
}

时间格式化的js

<!--时间格式化-->
    <script src="js/date-format.js" type="text/javascript" charset="utf-8"></script>
    <script id="createTime" type="text/html">
    {{#   
    var date = new Date();
    date.setTime(d.createTime);
    return date.Format("yyyy-MM-dd hh:mm:ss"); 
    }} 
    </script>