Layui数据表格中时间戳数据转化为时间格式的几种方法

引言

 

在使用Layui框架数据表格组件进行数据展示的时候，往往从后台得到Json数据，其中包含时间数据时往往为时间戳格式 ，直接将时间戳格式的数据显示到VIew上是很不友好的(如下图)，所以我们需要将时间戳数据格式进行转化。

在Layui中使用数据表格是通过cols中的filed属性来绑定数据的，所以应该采用以下方式进行处理 ! 

首先要了解Layui中templet-自定义模板列，默认的content内容是数据原样输出的，但是通过templet-自定义模板列可以按照指定模板对列进行设置，功能非常强大!

方法一:通过选择器绑定模板

 JS代码:

table.render({
                elem: '#idTest' //指定原始表格元素选择器（推荐id选择器）
                , url: '/Layui/Read'//数据接口地址
                , height: 330 //容器高度
                , width:1000
                , cols: [[{ type: 'checkbox', fixed: 'left' },
                    { field: 'mid', sort: true, fixed: true, title: "编号" },
                    { field: 'mname', title: "电影名称" }, 
                    { field: 'createtime', title: "上映时间", templet: '#formatTime' },
                    { field: 'typeName', title: "电影类型" },
                    { field: 'cname', title: "国家" },
                    { fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo' }
                ]], //设置表头
                page: true,//开启分页
                limit:5,
                limits:[5,10,15,20]
            });
<script type="text/html" id="formatTime">
        {{formatDate(d.createtime)}}
<script>
        function formatDate(str) {
            var now = new Date(parseInt(str.replace("/Date(", "").replace(")/", ""), 10));
            var year = now.getFullYear();  //取得4位数的年份
            var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date = now.getDate();      //返回日期月份中的天数（1到31）
            var hour = now.getHours();     //返回日期中的小时数（0到23）
            var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
            var second = now.getSeconds(); //返回日期中的秒数（0到59）
            return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        }
</script>

    说明: 

     在含有时间的列对象中,templet传入对应模板的选择器【templet】

   

模板中要使用mustache语法，调用自己写的时间转化函数formatDate()，在templet中对象 d 包含接口返回的所有字段和数据，我们可以对formatDate()进行定制返回想要的时间格式。

   效果:

方法二:函数转义+Layui.util工具集(推荐)

1.layui.util是Layui提供的工具集，里面提供了一些小工具组件和若干方法，非常方便、适用，可以帮助我们解决一些小问题。

        这里我们用到util.toDateString()方法。

util.toDateString(time, format)

转化时间戳或日期对象为日期格式字符  参数 time：可以是日期对象，也可以是毫秒数  参数 format：日期字符格式（默认：yyyy-MM-dd HH:mm:ss），可随意定义，如：yyyy年MM月dd日

      2.templet函数转义:意思就是在绑定列templet的时候可以不用传一个选择器，直接传一个function处理，参数d同样包含每一行的所有字段和数据。

 JS代码:

  使用until工具集首先要在layui.use方法中实例化一个util

var util = layui.util;
table.render({
                elem: '#idTest' //指定原始表格元素选择器（推荐id选择器）
                , url: '/Layui/Read'//数据接口地址
                , height: 330 //容器高度
                , width:1000
                , cols: [[{ type: 'checkbox', fixed: 'left' },
                    { field: 'mid', sort: true, fixed: true, title: "编号" },
                    { field: 'mname', title: "电影名称" }, 
                    { field: 'createtime', title: "上映时间", templet: function (d) { return util.toDateString(d.createtime * 1000, "yyyy-MM-dd HH:mm:ss") } },
                    { field: 'typeName', title: "电影类型" },
                    { field: 'cname', title: "国家" },
                    { fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo' }
                ]], //设置表头
                page: true,//开启分页
                limit:5,
                limits:[5,10,15,20]
});

修正: return util.toDateString(/\d+/.exec(d.createtime)[0])

效果:

总结 

     以上就是两种将后台时间戳数据转化为时间格式的两种办法，个人还是比较推荐第二种，因为使用起来比较方便，而且是Layui提供的工具，不用自己再去也添加额外JS代码定义function，简单、快捷。