layui前端时间戳转化实例


Posted in Javascript onNovember 15, 2019

1、html : 添加一个table,用来显示数据

<table class="layui-table" id="list" lay-filter="manageEvent"></table>

2、js部分 :接收后台传来的数据

layui.use(['laypage', 'layer','element','table','form'], function(){
   var laypage = layui.laypage;
   var layer = layui.layer;
   var element = layui.element;
   var table = layui.table;
   var form = layui.form;
   
   table.render({
    elem: '#list',
    url: '${path}/manage/selectManageList', //数据接口,
    page: false, //开启分页
    cols: [[ //表头
     {field: 'manageId', title: 'ID', sort: true, fixed: 'left',align:"center"},
     {field: 'phone', title: '手机号码',align:"center"},
     {field: 'mrtRoleName', title: '身份',align:"center"},
     {field: 'loginTime', title: '最后登入时间',align:"center",templet: '#loginTime'},
     {field: 'status', title: '状态',templet: '#statusTpl',align:"center"},
     {field:'status', title:'操作', toolbar: '#barDemo',templet:"#statusEdit",unresize: true,align:"center"}
    ]]

 });

3、引进 :

<script type="text/html" id="loginTime"> 

 {{ dateFormat(d.loginTime) }} // d是layui自带的
</script>

layui前端时间戳转化实例

4、引入下面JS代码,可以刚在公共的JS文件里面

/* 时间戳转化开始 */
  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), //q是季度
    "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; 
  } 
  
  String.prototype.format = function (args) { 
   var result = this; 
   if (arguments.length > 0) { 
    if (arguments.length == 1 && typeof (args) == "loginTime") { 
     for (var key in args) { 
      if (args[key] != undefined) { 
       var reg = new RegExp("({" + key + "})", "g"); 
       result = result.replace(reg, args[key]); 
      } 
     } 
    } 
    else { 
     for (var i = 0; i < arguments.length; i++) { 
      if (arguments[i] != undefined) { 
       //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题 
       var reg = new RegExp("({)" + i + "(})", "g"); 
       result = result.replace(reg, arguments[i]); 
      } 
     } 
    } 
   } 
   return result; 
  }
  function dateFormat(value) {
   return value ? new Date(value*1000).format("yyyy-MM-dd hh:mm:ss") : ""; 
  }

值得注意的是:value值,毫秒还是秒;我这里的value是毫秒所以乘了1000

/* 时间戳转化结束

layui前端时间戳转化实例

以上这篇layui前端时间戳转化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 #Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 #Javascript
layui数据表格重载实现往后台传参
Nov 15 #Javascript
JS实现贪吃蛇游戏
Nov 15 #Javascript
Layui表格监听行单双击事件讲解
Nov 14 #Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 #Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 #Javascript
You might like
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php数组合并的二种方法
2014/03/21 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python的Django框架使用入门指引
2015/04/15 Python
Sublime开发python程序的示例代码
2018/01/24 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
开放系统互连参考模型
2016/06/29 面试题
八一建军节部队活动方案
2014/02/04 职场文书
优秀员工评语
2014/02/10 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
军事理论课感想
2015/08/11 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis