转换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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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
cakephp打印sql语句的方法
2015/02/13 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
基于python时间处理方法(详解)
2017/08/14 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
通过实例解析Python调用json模块
2019/12/11 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
一行Python命令实现批量加水印
2022/04/07 Python