转换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 相关文章推荐
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
javascript常用方法汇总
Dec 02 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
3种js实现string的substring方法
Nov 09 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
React中的render何时执行过程
Apr 13 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
手把手教您实现react异步加载高阶组件
Apr 07 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
多文件上传的例子
2006/10/09 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python 异常处理实例详解
2014/03/12 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python修改FTP服务器上的文件名
2019/09/11 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
会计系个人求职信范文分享
2013/12/20 职场文书
个人贷款承诺书
2014/03/28 职场文书
询价采购方案
2014/06/09 职场文书
奥运会口号
2014/06/13 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
比赛主持人开场白
2015/05/29 职场文书
教师理论学习心得体会
2016/01/21 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
实操Python爬取觅知网素材图片示例
2021/11/27 Python