如何在 SlickGrid 中智能地格式化日期时间？

Question

问题： 我正在将 ASP.NET 网格视图更改为 SlickGrid。
到目前为止，它工作正常，我只是在日期格式方面遇到了一点问题。


我的 JSON 序列化测试数据如下所示：

[{
        "title" : "Task 1",        
        "duration" : "5 days",        
        "percentComplete" : 47,        
        "start" : "\/Date(1230764400000)\/",        
        "finish" : "\/Date(1241128800000)\/",        
        "effortDriven" : false
    },
    {
        "title" : "Task 2",        
        "duration" : "5 days",        
        "percentComplete" : 41,        
        "start" : "\/Date(1230764400000)\/",        
        "finish" : "\/Date(1241128800000)\/",        
        "effortDriven" : false
    },
    {
        "title" : "Task 3",        
        "duration" : "5 days",        
        "percentComplete" : 42,        
        "start" : "\/Date(1230764400000)\/",        
        "finish" : "\/Date(1241128800000)\/",        
        "effortDriven" : true
    },



    {
        "title" : "Task 100",        
        "duration" : "5 days",        
        "percentComplete" : 63,        
        "start" : "\/Date(1230764400000)\/",        
        "finish" : "\/Date(1241128800000)\/",        
        "effortDriven" : false
    }]

这就是我使用 AJAX 加载数据的方式

<script type="text/javascript" language="javascript">
    Date.prototype.getTicksUTC = function () {
        return Date.parse(this.toUTCString()) + this.getUTCMilliseconds();
    } // End Function getTicksUTC

    function GetNavigationContent() 
    {
        var filter = "nofilter" + new Date().getTicksUTC();

        $.getJSON('/ajax/NavigationContent.ashx?filter=' + filter, function (data) {
            grid = new Slick.Grid($("#myGrid"), data, columns, options);

            grid.onSort = function (sortCol, sortAsc) 
            {
                sortdir = sortAsc ? 1 : -1;
                sortcol = sortCol.field;

                if (sortAsc == true)
                    data.sort(compare);
                else
                    data.reverse(compare);

                grid.render();
            }; // End Event onSort

        }); // End Function getJSON

    } // End Function GetNavigationContent

</script>









    var columns = [
         { id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title" }
        , { id: "duration", name: "Duration", field: "duration" }
        , { id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar }
        , { id: "start", name: "Start", field: "start", minWidth: 60 }
        , { id: "finish", name: "Finish", field: "finish", minWidth: 60 }
        , { id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark }
    ];

这是我的选择：

   var options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: true
    };

    GetNavigationContent();

这是生成测试数据的 ajax 处理程序：

Imports System.Web
Imports System.Web.Services


Public Class NavigationContent
    Implements System.Web.IHttpHandler, System.Web.SessionState.IRequiresSessionState


    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        context.Response.ContentType = "application/json"

        Dim lsNavigationContent As New List(Of cNavigationRow)

        Dim seed As Random = New Random
        Dim nrThisNavigationRow As cNavigationRow = Nothing
        For i As Integer = 1 To 100 Step 1
            nrThisNavigationRow = New cNavigationRow

            nrThisNavigationRow.title = "Task " + i.ToString()
            nrThisNavigationRow.percentComplete = seed.Next(0, 100)
            nrThisNavigationRow.effortDriven = DirectCast(IIf(i Mod 3 = 0, True, False), Boolean)

            lsNavigationContent.Add(nrThisNavigationRow)
        Next

        Dim strJson As String = Tools.JSON.JsonHelper.Serialize(lsNavigationContent, False)
        context.Response.Write(strJson)
    End Sub


    Public Class cNavigationRow
        Public title As String = "Task 499"
        Public duration As String = "5 days"
        Public percentComplete As Integer = 9
        Public start As DateTime = System.DateTime.Parse("01.01.2009", New System.Globalization.CultureInfo("de-CH", False))
        Public finish As DateTime = System.DateTime.Parse("01.05.2009", New System.Globalization.CultureInfo("de-CH", False))
        Public effortDriven As Boolean = False
    End Class


    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property


End Class

问题是，它呈现如下（参见日期列）：

如何最好地格式化日期列？
将其作为已格式化的字符串输入，还是有更好的方法，提供语言和/或格式代码？
如果我把它作为字符串放在那里，它将如何排序？

Answer 1

SlickGrid 可以接受 Javascript 日期。但是，您可能希望在渲染之前将它们格式化为字符串。 SlickGrid 使用列格式化程序来处理这个问题。

首先看看如何通过这个例子使用格式化程序： http://mleibman.github.com/SlickGrid/examples/example2-formatters.html

现在，对于日期，您需要注册一个自定义格式化程序。您可以将此添加到slick.formatters.js。在这里，我创建了一个自定义格式化程序，用于解析 Date 对象并返回格式化的字符串：

(function ($) {
  // register namespace
  $.extend(true, window, {
    "Slick": {
      "Formatters": {
        "PercentComplete": PercentCompleteFormatter,
        "PercentCompleteBar": PercentCompleteBarFormatter,
        "YesNo": YesNoFormatter,
        "Checkmark": CheckmarkFormatter,
        "Date": DateFormatter
      }
    }
  });

  function DateFormatter(row, cell, value, columnDef, dataContext) {
    return (value.getMonth()+1)+"/"+value.getDate()+"/"+value.getFullYear();
  }

现在您可以使用此格式化程序正确格式化您的日期列。在您的示例中，您的列定义如下所示：

{ id: "start", name: "Start", field: "start", minWidth: 60, formatter: Slick.Formatters.Date }

开始列中的日期现在看起来格式正确：

如您所见，排序也可以正常工作。让我知道这是否有帮助！

Answer 2

我认为这不是在 SlickGrid 中使用自定义格式化程序的好案例。在我看来，在这种情况下基础数据是不正确的。问题是底层data 数组中的Start 和Finish 字段被作为字符串处理。我真的认为这些应该是日期/时间类型。

自定义格式化程序肯定会解决渲染问题，但并不能真正解决根本原因。例如，假设您想稍后根据这些日期值进行一些计算。

问题在于对Tools.JSON.JsonHelper.Serialize() 的调用。该方法不会以客户端可以轻松读取的格式序列化 datetime 类型。也许这个方法有一些覆盖可以让你指定格式？

另一种可能性是在 ASP.Net 中调用 Json Web 服务时使用内置的ScriptService 功能。这是我一直喜欢的方法。欲了解更多信息，try here。

如果这些都不可能，我认为在将数据绑定到 SlickGrid 之前，最好先解析从 Json Web 服务返回的日期值。从而确保您的 dataarray 确实包含日期/时间值。

只有我的 2 美分。如果您真的只需要这样做，自定义格式化程序解决方案就可以正常工作。

编辑：如果有帮助，这是我用来解析以 ASP 格式返回的日期的函数。

function parseASPDate(s) {
    if (s) {
        return new Date(parseInt(s.substr(6), 10));
    } else {
        return null;
    }
}

你可以找到more info here。