2

我们在 asp.net MVC 应用程序中使用 JQgrid...

Jqgrids 按照设计在显示的所有日期时间上进行时区偏移...

我们想改为显示服务器时间（未针对时区进行修改）

我找到了这个答案： jqgrid is display different datetime based on time zone

它告诉我使用自定义格式化程序使用 Json 序列化器将 MS 样式日期时间重新格式化为新格式。

这是我的网格定义

function InitJqGridMon() {
        startUrl = '@Url.Action("GetClassPeriodsByDayCd", "Scheduling")';
        GridParams = { url: startUrl, colModel: [
                     { name:'Scheduled',        index:'Scheduled',      label:'   ', align:'left', width:2, formatter: FormatCheckBox },
                     { name:'PeriodId',         index:'PeriodId',       hidden: true  },
                     { name:'PeriodNo',         index:'PeriodNo',       label:'Per', align:'center', width:2 },
                     { name:'PeriodStartTm',    index:'PeriodStartTm',  label:'Start', align:'left', width:4, formatter: date,  formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },
                     { name:'PeriodEndTm',      index:'PeriodEndTm',    label:'End', align:'left', width:4, formatter: date,  formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },
                     { name:'Available',        index:'Available',      label:'Avl.', align:'left', width:2, formatter: FormatAvailable },
                     { name:'ClsId',            index:'ClsId',          hidden: true  },
                     { name:'ClsPeriodId',      index:'ClsPeriodId',    hidden: true  },
                     { name:'CtrId',            index:'CtrId',          hidden: true  },
                     { name:'PeriodDayCd',      index:'PeriodDayCd',    hidden: true  },
                     { name:'BeoIndex',         index:'BeoIndex',       hidden: true  },
                     { name:'ScheduledModified', index:'ScheduledModified',   hidden: true  }
        ] };

我在范围内定义了这个......

var myEditSerialize = function (data) {
     var obj = $.extend({}, data);
     obj.RolloutTermin = jQuery.datepicker.parseDate('dd.mm.yy', data.RolloutDate);
     if (Date.isInstanceOfType(obj.RolloutDate)) {
         obj.RolloutDate= '\/Date(' + obj.RolloutDate.getTime() + ')\/';
}

返回 JSON.stringify(obj);

然后我做了这个改变：

{ name:'PeriodStartTm', index:'PeriodStartTm', label:'Start', align:'left', width:4, formatter: myEditSerialize , formatoptions: { srcformat: 'mdY', newformat: 'h:i A' } },

它失败了

我在我们的代码中挖掘了一个工作格式化程序的示例并尝试了这个

function FormatDateTime(cellValue, options, rowObject)
        {
          var obj = $.extend({}, cellValue);
          obj.RolloutTermin = jQuery.datepicker.parseDate('dd.mm.yy', cellValue.RolloutDate);
          if (Date.isInstanceOfType(obj.RolloutDate)) {
          obj.RolloutDate= '\/Date(' + obj.RolloutDate.getTime() + ')\/';
          return JSON.stringify(obj);

        }

{ name:'PeriodStartTm',    index:'PeriodStartTm',  label:'Start', align:'left', width:4, formatter: FormatDateTime,  formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },

但是当我运行它时， data 。推出日期未定义...

在这一点上，我意识到我对解决我的问题所要做的事情了解得不够多，无法理解给定答案的正确实现......

当我调试

var obj = $.extend({}, cellValue);

Obj 是由 MS 序列化的日期时间值的字符到达（自纪元以来的毫秒数），而不是某个具有 RolloutDate 属性的对象...

我迷路了，有人可以帮我理解发生了什么，并指出我解决这个问题的正确方法吗？我不是一个很棒的 JavaScript 人，我可以做 Jquery，而且我只使用过几次 JQGrid.. 主要是样板.. 所以我敢肯定这是我缺乏 jqgrid-fu 的问题.

4

1 回答 1

3

几个选项：

  1. 从服务器发送日期作为字符串而不是 DateTime 对象。

  2. 为 jqgrid 使用自定义格式化程序，将 DateTime javascript 对象转换为 UTC 时间。我推荐使用moment.js

这是我在 javascript 中的自定义日期格式化程序：

function utcDateFormatter(cellvalue, options, rowObject) {
    if (cellvalue) {
        return moment(cellvalue).utc().format("MM/DD/YYYY");
    } else {
        return '';
    }
}

将此添加到您的colmodel：

formatter: utcDateFormatter

我还在服务器端使用实体框架，它还将来自数据库的 DateTime 字段转换为本地服务器时间。检查以确保 DateTime 没有在服务器和客户端上都被转换（在服务器/客户端时区不同之前它不会爬行）。

这是一篇好文章：http ://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

具体查看他如何使用 PowerShell 将 json datetime 转换为常规 datetime 以进行调试：

PS C:\> (new-object DateTime(1970,1,1,0,0,0,0)).AddMilliseconds(1330848000000).AddHours(-8)

Sunday, March 04, 2012 12:00:00 AM

编辑：

这是我的日期时间列的完整模型：

{
                        name: 'StatusDateUtc',
                        index: 'StatusDateUtc',
                        width: 140,
                        align: 'left',
                        editable: true,
                        formatter: utcDateFormatter,
                        sorttype: 'date',
                        editoptions: {
                            dataInit: function(elem) {
                                $(elem).datepicker({
                                    changeMonth: true,
                                    changeYear: true,
                                    showButtonPanel: true
                                });
                            }
                        }
                    }
于 2013-05-22T16:52:09.727 回答