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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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函数(ignore_user_abort)
2012/08/01 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
读jQuery之八 包装事件对象
2011/06/21 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
JavaScript 原型继承
2011/12/26 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python海龟绘图实例教程
2014/07/24 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python的flask框架难学吗
2020/07/31 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
中国梦演讲稿教师篇
2014/04/23 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android