转换layUI的数据表格中的日期格式方法


Posted in Javascript onSeptember 19, 2019

转换layUI的数据表格中的日期格式

前端jsp代码

转换layUI的数据表格中的日期格式方法

<table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo">
 <thead>
 <tr>
  <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
  <th lay-data="{field:'userName',align:'center'}">用户名</th>
  <th lay-data="{field:'gender',align:'center',width:80}">性别</th>
  <th lay-data="{field:'mobile',align:'center'}">手机号码</th>
  <th lay-data="{field:'email',align:'center'}">电子邮箱</th>
  <th lay-data="{field:'userheat',align:'center',width:100,sort:'true'}">人气</th>
  <th lay-data="{field:'regDate',align:'center',templet:'<div>{{ layui.laytpl.toDateString(d.regDate) }}</div>'}">注册时间</th>
  <th lay-data="{field:'lastLogin',align:'center',templet:'<div>{{ layui.laytpl.toDateString(d.lastLogin) }}</div>'}">最后一次登录时间</th>
  <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
 </tr>
 </thead>
</table>

js代码:

layui.use('laytpl', function(){
 var laytpl = layui.laytpl;
 //时间戳的处理
 layui.laytpl.toDateString = function(d, format){
 if(d==null||d==''){
  return "未登录";
 }else{
 var date =new Date(d.time) 
 ,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模块

2、后台返回json的String类型,否则如果数据为空,会出错,错误如下:

net.sf.json.JSONException: Object is null
 net.sf.json.JSONNull.isEmpty(JSONNull.java:69)
 sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
 sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
 java.lang.reflect.Method.invoke(Method.java:606)
 com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:536)
 com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:663)
 com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:156)
 com.fasterxml.jackson.databind.ser.std.MapSerializer.serializeFields(MapSerializer.java:557)
 com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:466)
 com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:29)
 com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serializeContents(CollectionSerializer.java:132)
 com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serialize(CollectionSerializer.java:94)
 com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serialize(CollectionSerializer.java:24)
 com.fasterxml.jackson.databind.ser.std.MapSerializer.serializeFields(MapSerializer.java:557)
 com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:466)
 com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:29)
 com.fasterxml.jackson.databind.ser.DefaultSerializerProvider.serializeValue(DefaultSerializerProvider.java:251)
 com.fasterxml.jackson.databind.ObjectWriter.writeValue(ObjectWriter.java:846)
 org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter.writeInternal(AbstractJackson2HttpMessageConverter.java:286)
 org.springframework.http.converter.AbstractGenericHttpMessageConverter.write(AbstractGenericHttpMessageConverter.java:106)
 org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor.writeWithMessageConverters(AbstractMessageConverterMethodProcessor.java:231)
 org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor.handleReturnValue(RequestResponseBodyMethodProcessor.java:174)
 org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite.handleReturnValue(HandlerMethodReturnValueHandlerComposite.java:81)
 org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:113)
 org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:827)
 org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:738)
 org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)
 org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:967)
 org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:901)
 org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:970)
 org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:861)
 javax.servlet.http.HttpServlet.service(HttpServlet.java:624)
 org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:846)
 javax.servlet.http.HttpServlet.service(HttpServlet.java:731)
 org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
 org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:197)
 org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)

以上这篇转换layUI的数据表格中的日期格式方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 #Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 #Javascript
关于layui toolbar和template的结合使用方法
Sep 19 #Javascript
深入理解javascript prototype的相关知识
Sep 19 #Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 #Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 #Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 #Javascript
You might like
linux下安装php的memcached客户端
2014/08/03 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
写自荐信的七个技巧
2013/10/15 职场文书
春季防火方案
2014/05/10 职场文书
关于保护环境的建议书
2014/05/13 职场文书
社区维稳工作方案
2014/06/06 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014年行政工作总结
2014/11/19 职场文书
全国助残日活动总结
2015/05/11 职场文书
教育教学读书笔记
2015/07/02 职场文书
升学宴家长答谢词
2015/09/29 职场文书
五年级作文之学校的四季
2019/12/05 职场文书