解决layui数据表格Date日期格式的回显Object的问题


Posted in Javascript onSeptember 19, 2019

有属性: private Date createtime;

但是回显的时候,显示{ Object object },想要转换成字符串格式显示。

layui中显示:

在对应的实体类中添加属性:private String createtimestr;

然后添加对应的set/get方法,但是方法处理的是createtime

但是在Mybatis-plus框架映射时,数据库表里面又没有该字段,获取数据的时候会报异常,unknown field "createtimestr" in table ,

解决办法,在添加的属性上面添加注解 @TableField(exist = false)

用于表示表中没有该字段,不然报错。

最后就是

方法二:

在前端页面创建处理时间的函数:

<!--转换时间格式-->
<script type="text/javascript">
 function dateToStr(date) {
 var time = new Date(date.time);
 var y = time.getFullYear();
 var M = time.getMonth() + 1;
 M = M < 10 ? ("0" + M) : M;
 var d = time.getDate();
 d = d < 10 ? ("0" + d) : d;
 var h = time.getHours();
 h = h < 10 ? ("0" + h) : h;
 var m = time.getMinutes();
 m = m < 10 ? ("0" + m) : m;
 var s = time.getSeconds();
 s = s < 10 ? ("0" + s) : s;
 var str = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
 console.log(str);
 return str;
 }
</script>

然后再模板输出

{field: 'createtime', title: '发布时间',sort: true, minWidth: 100,templet:'<div>{{dateToStr(d.createtime)}}</div>'}

或者

{field: 'createtime', title: '发布时间',sort: true, minWidth: 100,templet:function (d) {
 return dateToStr(d.createtime);
 }}

还有就是,时间对象里面会有个 time 时间戳属性,可以通过 new Date(xxx.time),即可。

以上这篇解决layui数据表格Date日期格式的回显Object的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
javascript时区函数介绍
Sep 14 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
javascript随机变色实例代码
Oct 15 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 #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
You might like
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python基本语法经典教程
2016/03/11 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
详解Python学习之安装pandas
2019/04/16 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Python 实现微信自动回复的方法
2020/09/11 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
专科应届生求职信
2013/11/24 职场文书
求职个人评价范文
2014/04/09 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
人事局接收函
2015/01/30 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏
sql注入报错之注入原理实例解析
2022/06/10 MySQL