• EasyUI 的DataGrid中DateTime的格式化问题


    想必用过EasyUI的朋友们都应该会遇到这样的情况吧:(下图)

    image

    在EasyUI中DataGrid中如果要显示DateTime的时间时候,便会显示上图这样的格式,很明显,这里的格式不会是我们想要的,我们想要的就大概如2014-10-30 13.29之类的才人性话,从数据库后台传过来的是一个DateTime类型,却显示成这样。

    对这个时间分析后,无意中发现,这个括号里面的不就是Unix时间戳吗?,那我们把这个时间戳转一下不就行了??于是我写了一个js方法,把传入的字符串(Unix时间戳)转成我们想要的时间格式。

    function getTime(/** timestamp=0 **/) {
                var ts = arguments[0] || 0;
                var t, y, m, d, h, i, s;
                t = ts ? new Date(ts * 1000) : new Date();
                y = t.getFullYear();
                m = t.getMonth() + 1;
                d = t.getDate();
                h = t.getHours();
                i = t.getMinutes();
                s = t.getSeconds();
                // 可根据需要在这里定义时间格式  
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
            }

    然后在DataGrid中的时间这一项加入一个formatter 格式器来对其格式进行格式化。

    { field: 'Title', title: '标题',  500 },
                        { field: 'Author', title: '作者',  100 },
                        {
                            field: 'CreateTime', title: '发布时间',  100,
                            formatter: function (date) {
                                var pa = /.*((.*))/;   //获取    /Date(时间戳) 括号中的字符串时间戳 的正则表达式
                                var unixtime = date.match(pa)[1];  //通过正则表达式来获取到时间戳的字符串
                                return getTime(unixtime);
                            }
                        },

    按照上面的写法,应该是没问题的了,于是再次运行效果图如下:

    image

    奇怪了,怎么还不是我们想要的格式呢,那个js函数目测是没有问题的,如果有问题的话便应该是那个根本就不是unix时间戳,但是这个字符串也太类似了吧,而且即使前面的年份出了问题,那后面的时间都是很正确的啊,和数据库的基本符合,于是打开网页通过站长工具的unix时间戳转化网站来确定下这个字符串到底是什么

    image

    图中可以看到基本就是unix时间戳,只是后面多了几个数字,不懂到底是什么,不过竟然那么接近的话,我直接把它后面的几个截去不就行了吗,最后发现这个方法的确可行/嘻嘻~~~~,于是最后的DataGrid的格式化器便这样写了

    formatter: function (date) {
                                var pa = /.*((.*))/;
                                var unixtime = date.match(pa)[1].substring(0,10);
                                return getTime(unixtime);
                            }

    通过substring来截取前面的10个数字,组成的字符串便是我们想要的unix时间戳了,阴差阳错,竟然就这么给我答对了,于是结果便成了我们想要的时间数据

    image

    尽管处理方法还有很多,这是只是我想到的处理方法,也不是很复杂,现在的EasyUI应该是能够智能的做到这一步了吧,上面过去getTime的js函数,可以通过Extend扩张到jquery中使用,这样就不需要再每个使用到这个方法的页面都写一次,重构了代码,希望这里的这个能帮到一些也遇到这种情况的朋友一点点提示。

  • 相关阅读:
    Django的路由寻址
    Guava Cache 原理分析与最佳实践
    「必知必会」最细致的 ArrayList 原理分析
    「必知必会」最细致的 LinkedList 原理分析
    oracle listagg() 函数
    .net HttpClient 向 WebApi Post 的方法
    MySql 如何让表名支持大小写
    Java的基本数据类型
    CF666E
    spring使用mybatis执行SQL脚本,创建和初始化数据库
  • 原文地址:https://www.cnblogs.com/xmfdsh/p/4062491.html
Copyright © 2020-2023  润新知