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

问题是，这样呈现（参见日期列）： Slickgrid

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

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 }

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

如您所见，排序也正常。如果这有帮助，请告诉我！

Answer 2

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

自定义格式化程序肯定会解决问题呈现，但它并没有真正解决根本原因。例如，假设您希望稍后根据这些日期值进行一些计算。

问题在于对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。

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

2 个答案: