多种方式解决EasyUI—DataGrid中DateTime的格式化问题

 

   引言


   最近在项目中遇到这么一个问题就是数据库中的字段类型是datetime类型的,这样当我们在controller中进行j


son序列化完成以后,在页面的easyuidatagrid中显示的时候出现了问题,不能正常显示,而是显示一列乱七八糟的


东西,见下图


   


   很明显这个格式的显示不是我们想要的结果,我们习惯的时间显示的方式像2016-03-24 23:14:11这样的,当小


编见到这个现象以后想了想肯定是因为这个字段的类型是datatime类型的,因为string类型的数据是可以正常显示


的,没有办法总能让用户看这样的东西啊,下面小编提供几种方式来解决这个问题


   第一、修改数据库


   既然我们知道了是因为数据库中的字段类型导致了这种错误,我们完全可以通过修改数据库的类型来解决,当


然这是个比较shit的办法,因为每个人都会知道,对于比较大的项目来说这个字段也会在多个地方用到,修改数据库


的代价是非常大的,所以不是个完美的解决方法。


  第二、修改ViewModel


   熟悉WCF+EF框架的同学都是非常了解ViewModel这个名词的,就是我们界面上面的东西都是通过viewmodel来操


作显示的,所以说viewmodel中的字段是不一定和数据库中的字段相同的,所以说我们可以在viewmodel中在增加一个


string类型的属性用来在页面中的显示,这样当我们从数据库拿到我们想要的数据以后,通过循环将datetime类型的


字段通过转换赋值给我们新增加的字段,这也是非常轻松就可以做到的,就不给大家做代码展示了。


   这样有一个弊端,当数据量非常大的时候这个循环可能非常影响我们的性能,当然在数据量比较小的系统中是


否完全没有问题的,所以说在小编看来也不是完美的。于是小编继续探索这个东西,得到第三种解决方案。


  第三 修改EasyuiDatagrid


  我们可以之间在页面显示的时候修改,小编认真分析这个显示的数据的时候发现,在括号中的那一串数字好像以


前见过的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);
        }

  然后在我们想显示的那一列加上一个格式化函数,代码如下;


{
                    field: 'UploadYear', title: '上传日期', width: 50,formatter: function (date) {
                        
                        var pa = /.*\((.*)\)/;   //获取    /Date(时间戳) 括号中的字符串时间戳 的正则表达式
                        var unixtime = date.match(pa)[1];  //通过正则表达式来获取到时间戳的字符串
                        return getTime(unixtime);
                    }


   本以为可以了,但是当我见到效果的时候还是失望了,因为还不是自己想要的,效果如下:


   


   这是为什么呢?自己又检查了一遍自己写的函数还是没有问题,那么问题出在哪里呢?只能是我认为的Unix时


间戳出现了问题,于是自己又用Unix时间戳的转换工具来查看时间戳,终于发现问题了:




  而我们页面中显示的时间是超过10位数字的,应该是13位数字,那么既然这么相似,我们就可以直接截取就可以


了,所以在格式化函数中


改成如下代码


{
                    field: 'UploadYear', title: '上传日期', width: 50,formatter: function (date) {
                        
                        var pa = /.*\((.*)\)/;   //获取    /Date(时间戳) 括号中的字符串时间戳 的正则表达式
                        <span style="color:#ff0000;"><strong>var unixtime = date.match(pa)[1].substring(0,10); </strong></span> //通过正则表达式来获取到时间戳的字符串
                        return getTime(unixtime);
                    }
                    
                }

   结果完美解决了EasyUI—DataGrid中DateTime的格式化问题,希望能给读者带来帮助!!


   


   小结


   在解决完问题以后就想起了米老师的一句话“你可以猜一个答案,但是猜完以后一定要去验证”,在见到这一


串数字的时候我就猜它是Unix时间戳,自己就按照这个时间戳做下去了,然后就出现错了,直到实在没有办法了才去


验证这个东西到底是不是自己认为的Unix时间戳,结果还是自己猜错了,这也花费了自己的时间。所以我们自猜完以


后一定要去验证,这样才是明智的做法。。。。


g-Jack CSDN认证博客专家 Spring Java Linux
硕士毕业于北京交通大学软件工程专业,拥有5年java工作经验,热爱编程,乐于分享,喜欢研究架构方向的优化,和大数据高并发架构的设计。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页