easyui里关于datagrid日期不能正常显示

最新推荐文章于 2021-04-12 19:41:21 发布

原创最新推荐文章于 2021-04-12 19:41:21 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

-----【前端】专栏收录该内容

7 篇文章

订阅专栏

在紧急上线的ITOO项目中，由于数据库更换，使用easyUI的datagrid日期显示出现错误。经过讨论，提出了三种解决方案：修改数据库格式、改变viewmodel数据类型或在读取后转换数据类型。考虑到分布式开发的现状，选择了在读取后转换的方法。通过编写JS解决了datagrid日期显示问题，这篇博客记录了解决问题的过程，并表达了对同事帮助的感谢。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期，在ITOO这一块由于急着上线，于是组长将我调到了权限资源这一块，由于是半道上出家，所以和我一起的小伙伴让我调前台的bug。然后在调试前台的 bug中，遇到了一个问题，因为数据库换了，又使用了easyUI，于是datagird表里头的关于时间这块的数据不能正常显示。

经过商量，我们得出了三种解决方法。

1.改变数据库数据格式

2.改变viewmodel的数据类型

3.从数据库中读取之后，进行数据类型转化。

根据现实情况，我们果断的选择了第三种。不仅仅是因为现在我们没有权限去改变数据库或者是viewmodel的数据类型，而且很大的一个考量因素就是我们目前的开发都是分布式开发，不应该因为一个部分的需求而去改变整个数据框架，因为一张表或者是一个viewmodel同时有好几个人在使用。

确定了方法之后，接下来就是实践的问题了。

1.写了一个js将datagrid表格拼了出来。
 $('#dg').datagrid({
        title: '用户资源管理',
        columns: [[
               { field: 'ck', checkbox: true },
               { field: 'ResourceName', title: '资源名称' },
                { field: 'Type', title: '类型' },
                 { field: 'Desc', title: '描述' },
                  { field: 'Priority', title: '优先级' },
                  { field: 'IsUse', title: '是否启用' },
                  {
                      field: 'StartTime', title: '开始时间'}
2.加了一个日期转换函数
 //转换日期格式
    function changeDateFormat(cellval) {
        if (cellval != null) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    }
3.在表格需要显示时间的地方，运用datagrid表格里头formatter方法调用日期转换函数。
  {
                      field: 'StartTime', title: '开始时间',
                      formatter: function (value, row, index) {
                          return changeDateFormat(value)
                      }
                  },
                   {
                       field: 'EndTime', title: '结束时间',
                       formatter: function (value, row, index) {
                           return changeDateFormat(value)
                       }
4.运行效果

问题就是如此一步步的解决了。现在留下这篇博客记录我昨天白天探索的痕迹。同时也非常感谢身边的小伙伴们的帮助。