转换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 相关文章推荐
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP中16个高危函数整理
2019/09/19 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
javascript实现拖放效果
2015/12/16 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python网站验证码识别
2016/01/25 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
python实现一组典型数据格式转换
2018/12/15 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
2015员工年度考核评语
2015/03/25 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis