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

首先加载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>

效果如下:
这里写图片描述

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
可以使用 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、付费专栏及课程。

余额充值