如何在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處理程序：

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()。該方法不會以客戶端可以輕鬆讀取的格式序列化日期時間類型。也許有一些覆蓋這個方法，讓你指定格式？

另一種可能是在ASP.Net中調用Json Web服務時使用內置的ScriptService功能。這是我一直喜歡的方法。欲瞭解更多信息，請致電try here。

如果這些都不可能，我認爲在將數據綁定到SlickGrid之前，從Json Web服務返回時分析日期值會更好。從而確保您的data數組確實包含日期/時間值。

只是我的2美分。自定義格式化程序解決方案將工作得很好，如果這真的是你需要做的。

編輯：如果有幫助，這裏是我用來解析ASP格式返回日期的函數。

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

你可以找到more info here。