《layui从鱼到渔》table 自定义模板之时间戳的转换

分享 未结 67 24272
贤心
贤心 2017-11-22
悬赏:20飞吻
道家有云:授之于鱼不如授之于渔,授人以鱼只救一时之急,授人以渔则可解一生之需。

基于这个出发点,《layui 从鱼到渔》的系列教程正式启动,我将结合大家的日常所需,不定期分享 layui 的“捕鱼”之道,算是对文档的补充,后续也将收录在案。为了能快速阅读,篇幅都不会太长。

而你是否原意成为一枚渔人,而非吃鱼的路人,全由你自己了。

首先带来的,是关于 table 模块中的自定义模板的分享。很多时候,table 并不想单调地呈现数据库存储的值,这时候就需要用到自定义模板的功能,layui 的文档也有相关介绍:table 自定义列模板。但这项功能由于涉及到 laytpl 语法,所以往往被许多人忽略。而今天我希望通过一个简单的例子:时间戳转换为日期字符,来引导大家勇敢去使用。

一. 编写公共方法,这里以赋值到 laytpl 对象为例
//时间戳的处理
layui.laytpl.toDateString = function(d, format){
var date = new Date(d || new Date())
,ymd = [
this.digit(date.getFullYear(), 4)
,this.digit(date.getMonth() + 1)
,this.digit(date.getDate())
]
,hms = [
this.digit(date.getHours())
,this.digit(date.getMinutes())
,this.digit(date.getSeconds())
];

format = format || 'yyyy-MM-dd HH:mm:ss';

return format.replace(/yyyy/g, ymd[0])
.replace(/MM/g, ymd[1])
.replace(/dd/g, ymd[2])
.replace(/HH/g, hms[0])
.replace(/mm/g, hms[1])
.replace(/ss/g, hms[2]);
};

//数字前置补零
layui.laytpl.digit = function(num, length, end){
var str = '';
num = String(num);
length = length || 2;
for(var i = num.length; i < length; i++){
str += '0';
}
return num < Math.pow(10, length) ? str + (num|0) : num;
};
讲解:
1) 之所以将方法暴露给 laytpl 对象,是便于模板能读取到,因为 laytpl 模板是在一个封闭的函数作用域中进行解析的,它只能读取到模板内的方法/属性和全局方法/属性。

2) layui.laytpl.toDateString(d, format) 方法接受两个参数。其中 d 可以是日期对象,也可以是毫秒数。format 是日期字符的格式,你可以随意定义,如:yyyy年MM月dd日

二. 在列模板中调用时间戳的处理方法
table.render({ //其它参数在此省略
elem: '#demo'
,cols: [[
{field: 'createTime', title: '创建时间', templet: '<div>{{ layui.laytpl.toDateString(d.time) }}</div>'}
]]
});
讲解:
d.time 中的 time 即是你接口返回的字段,如果是 unix 时间戳,这里记得要 d.time*1000,如果是毫秒数,这里直接传 d.time 即可。


本篇也只是抛砖引玉,业务中更多丰富的呈现,还需要你自行发散。


回帖
  • kenti
    2017-11-23
    如果table能直接传当前列的值,那模版也可以公共引用了。

    <script id="dateFormatTpl">
    <div>{{ layui.laytpl.toDateString(LAY_VALUE) }}</div>
    </script>
    其他页面的table列 即可引用同一id模版
    0 回复
  • 漫游游
    2017-11-23
    来点个赞,顺便求采纳~
    0 回复
  • 青青
    2017-11-23
    [鼓掌] [鼓掌] [鼓掌]
    0 回复
  • tomi_8994
    2017-11-23
    您好 有没有 2015-09-06T17:42:22 这种格式转换为 yyyy-MM-dd HH:mm:ss
    0 回复
  • 辛苦大佬了[心]
    0 回复
  • lodan
    2017-11-23
    [good] 希望继续有新的教程出现
    0 回复
  • jhhuang
    2017-11-23
    特意登录, 谢谢老大讲解
    0 回复
  • 人生如水
    2017-11-23
    table.reload(ID, options)和tableIns.reload(options)得区别,为什么我得本地数据渲染得表格,改变数据,tableIns.reload(options)方法可以重载,而table.reload(ID, options)不行
    0 回复
  • HouSiJi_Com
    2017-11-23
    0 回复
  • 深蓝卷墨
    2017-11-24
    学习了[嘻嘻]
    0 回复
本帖已设置禁止回复