引言

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

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

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

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

 JS代码:

[code]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()方法。

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

 JS代码:

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

[code]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]
});

效果:

总结 

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

• 点赞 3
• 收藏
• 分享
• 文章举报