asp.net - SlickGridでdatetimeをインテリジェントにフォーマットする方法は?

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

問題は、これが次のようにレンダリングされることです (日付列を参照してください)。スリックグリッド

日付列を最適にフォーマットするにはどうすればよいですか?
すでにフォーマットされた文字列として入力するか、言語やフォーマットコードを提供するより良い方法はありますか?
そこに文字列として配置すると、どのようにソートされますか?

score 9 · Accepted Answer

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 }

開始列の日付は適切にフォーマットされているように見えます: ここに画像の説明を入力

ご覧のとおり、並べ替えも適切に機能します。これが役立つかどうか教えてください！

score 2 · Accepted Answer

これは、SlickGrid でカスタムフォーマッタを使用するのに適したケースではないと思います。この場合、基礎となるデータが正しくないように思えます。問題は、基になる配列のStartandFinishフィールドが文字列として処理されていることです。dataこれらは日付/時刻型であるべきだと本当に思います。

カスタムフォーマッタは確かにレンダリングの問題を解決しますが、根本的な原因を実際に解決するわけではありません。たとえば、これらの日付値に基づいて後で計算を行うとします。

問題はへの呼び出しにありTools.JSON.JsonHelper.Serialize()ます。このメソッドは、クライアントが簡単に読み取れる形式で datetime 型をシリアル化していません。このメソッドには、フォーマットを指定できるオーバーライドがいくつかあるのではないでしょうか?

もう 1 つの可能性はScriptService、ASP.Net で Json Web サービスを呼び出すときに組み込み機能を使用することです。これは私がいつも好む方法です。詳細については、こちらをお試しください。

これらのどちらも可能でない場合は、データを SlickGrid にバインドする前に、Json Web サービスから返された日付値を解析する方がよいと思います。したがって、data配列に実際に日付/時刻の値が含まれていることを確認してください。

ちょうど私の2セント。カスタムフォーマッタソリューションは、それが本当に必要なすべての場合に問題なく機能します。

編集: 役立つ場合は、ASP 形式で返された日付を解析するために使用する関数を次に示します。

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

詳細については、こちらをご覧ください。

asp.net - SlickGridでdatetimeをインテリジェントにフォーマットする方法は?

2 に答える 2

Related

Reference