7

セルを編集できる編集可能な剣道グリッドがあり、グリッドはセルの左上隅に赤いマークを追加します。

別のページに移動してから、編集が行われたページに戻ると、赤いマークは消えていますが、セルに新しく追加された値は残っています。剣道サイトでこれに対する回答を見ました。「グリッドがリバウンドするたびに「ダーティ フラグ」を表示するには、すべてのモデルを反復処理する必要があります。グリッドセル。」

これは、手動でクラスをセルにDataBound()適用するグリッドのイベント (ページを切り替えると発生するようです) で実行する必要があると想定していますが、コードでこれを機能させる方法がわかりません。k-dirty-cellどんな考えでも大歓迎です。

$(function () {
                     $("#grid").kendoGrid({
                         height: 550,
                         scrollable: true,
                         sortable: true,
                         filterable: true,
                         resizable: true,
                         reorderable: true,
                         groupable: false,
                         editable: true, // enable editing
                         columns: [
                                    //REMOVED TO SHORTEN EXAMPLE    
                                    ],
                         toolbar: [{name: "save", text: "Save All Records"}, "cancel"], 
                         dataSource: {
                             schema: {
                                 data: "d", 
                                 total: function(data) {
                                    return data.d.length;
                                 },
                                 model: { 
                                     //REMOVED TO SHORTEN EXAMPLE  
                                     }
                                 }
                             },
                             batch: true,
                             pageSize: 10,
                             transport: {
                                 read: {

                                 },
                                 parameterMap: function (data, operation) {
                                     if (operation == "read") {
                                      //WEB SERVICE CALLS REMOVED... YOU GET THE POINT
                                     }
                                     else if(operation == "update") {
                                       //WEB SERVICE CALLS REMOVED... YOU GET THE POINT 
                                     }
                                 }
                             },
                         },
                         selectable: true,
                         pageable: true,
                         dataBound: function () 
                         {
                              //THIS IS FIRED WHEN I CHANGE PAGEs BUT
                              //NOT SURE WHAT CODE GOES HERE TO 
                              //REAPPLY DIRTY CELL MARKER
                 };
4

1 に答える 1

9

データバインド イベントは、これを再適用するのに適した場所ですが、グリッドの dataItems をループするとき、各行にはダーティ フラグがありますが、各フィールドにはありません。

グリッド内の保留中の変更のみを参照する方法を認識していない可能性が非常に高いですが、そのような変更をより詳細なレベルで追跡するための小さなシステムを作成しました。

私のシステムでは、グリッドの保留中の変更を PendingChanges というグローバル変数に保存しています。

次に、2 つのイベントを指定します。1 つ目は、グリッドの dataSource のchange イベントです。このコードは、発生したばかりの変更から必要な情報を保存します。

    var PendingChanges = [];
    function GridEdit(e) {
        var cellHeader = $("#grid").find("th[data-title='" + e.field + "']");
        if (cellHeader[0] != undefined) {
           var pendingChange = new Object();
           //Holds field name
           pendingChange.PropertyName = e.field;
           //Keeps track of which td element to select when re-adding the red triangle
           pendingChange.ColumnIndex = cellHeader[0].cellIndex;
           //used to pull row.  Better than the row's id because you could have
           //multiple rows that have been inserted but not saved (ie. all have
           //ID set to 0
           pendingChange.uid = e.items[0].uid;
           //Remember to clear this out after you save
           PendingChanges.push(pendingChange);
        }
    }

次に、dataBound イベントを使用して保留中の変更を確認し、関連するセルに赤い三角形を表示するように設定します。

function GridDataBound(e) {
    for (var i = 0; i < PendingChanges.length; i++) {
        var row = this.tbody.find("tr[data-uid='" + PendingChanges[i].uid + "']");
        var cell = row.find("td:eq(" + PendingChanges[i].ColumnIndex + ")");

        if (!cell.hasClass("k-dirty-cell")) {
            cell.addClass("k-dirty-cell");
            cell.prepend("<span class='k-dirty'></span>");
        }
    }
}

上記のコードthisでは、 を参照していThe widget instance which fired the event.ます。これは Kendo UI Docs からそのままです。

うまくいけば、これは少なくともあなたを正しい方向に向けます. グリッドを保存する場合は、保存が成功したら PendingChanges 配列をクリアすることを忘れないでください。そのために RequestEnd イベントを使用することをお勧めします。

于 2013-07-05T15:29:42.100 に答える