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

Question

问题:我正在将ASP.NET gridview更改为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-handler:

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对象并返回格式化的String:

(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 }

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

如您所见,排序也正常.如果这有帮助,请告诉我!