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-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 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数组冒泡排序算法实例
2016/05/06 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
jquery查找tr td 示例模拟
2014/05/08 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
小程序转发探索示例
2019/02/19 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
关于python中remove的一些坑小结
2021/01/04 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
应届生服务员求职信
2013/10/31 职场文书
书法培训心得体会
2014/01/05 职场文书
大学校运会广播稿
2014/02/03 职场文书
采购求职信
2014/03/17 职场文书
校长寄语大全
2014/04/09 职场文书
争先创优活动总结
2014/08/27 职场文书
毕业横幅标语
2014/10/08 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书