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

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

引言


最近在项目中遇到这么一个问题就是数据库中的字段类型是datetime类型的,这样当我们在controller中进行json序列化完成以后,在页面的easyuidatagrid中显示的时候出现了问题,不能正常显示,而是显示一列乱七八糟的东西,见下图

20160302081010041.png

很明显这个格式的显示不是我们想要的结果,我们习惯的时间显示的方式像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);
                    }

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


20160302081158136.png这是为什么呢?自己又检查了一遍自己写的函数还是没有问题,那么问题出在哪里呢?只能是我认为的Unix时间戳出现了问题,于是自己又用Unix时间戳的转换工具来查看时间戳,终于发现问题了:


20160301234036736.png

而我们页面中显示的时间是超过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的格式化问题,希望能给读者带来帮助!!


20160302085500676.png

小结


在解决完问题以后就想起了米老师的一句话“你可以猜一个答案,但是猜完以后一定要去验证”,在见到这一串数字的时候我就猜它是Unix时间戳,自己就按照这个时间戳做下去了,然后就出现错了,直到实在没有办法了才去验证这个东西到底是不是自己认为的Unix时间戳,结果还是自己猜错了,这也花费了自己的时间。所以我们自猜完以后一定要去验证,这样才是明智的做法。。。。

目录
相关文章
|
6月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
39 2
|
6月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
66 0
|
6月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
6月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
154 0
|
6月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
252 0
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决