グリッドを保存する前に古い値と新しい値が異なる場合のみ、剣道ダーティーフラグを比較して表示する方法

Question

剣道グリッドで、値を変更するとグリッドセルに剣道のダーティーフラグが表示されます。しかし、同じグリッドセルをクリックして以前の値（既存の値）に変更すると、ダーティーフラグが引き続き表示されます。

値が以前の値と似ているかどうかを確認し、保存する前に汚れたフラグを表示しないでください。

以下は、剣道編集可能なドロップダウンリストです。

function editCategoryDropDown(container, options) { 
    var catObject = JSON.parse(ticketProjectCategoryObject.value); 
    $('<div id="categoryDDTreeView" class="dropDownTreeViewStyle"/>').appendTo(container); 
    var catDropDownTreeView = $("#categoryDDTreeView").kendoExtDropDownTreeView({ 
     treeview: { 
      dataSource: new kendo.data.HierarchicalDataSource({ 
       data: catObject 
      }), 
      //expended: true, 
      loadOnDemand: false, 
      change: function (e) { 
       { 
        var dropDownTreeViewObj = $('#categoryDDTreeView').find('.k-input'); 
        var nodeTitle = dropDownTreeViewObj.attr("title"); 
        if (nodeTitle != null) { 
         options.model.Category = nodeTitle; 
         options.model.CategoryId = dropDownTreeViewObj.attr("nodevalue") 
         options.model.dirty = true; 
         container.addClass("k-dirty-cell"); 
        } 
       }; 
      } 
     }, 
    }).data("kendoExtDropDownTreeView"); 
    var dropDownBox = catDropDownTreeView.dropDownList(); 
    dropDownBox.text(options.model.Category) 
    var treeView = catDropDownTreeView.treeview(); 
    var node = treeView.findByText(options.model.Category.split("|").pop().trim()); 
    treeView.select(node); 

} 

Answer 1

これは興味深い作業ですので、実験に少し時間を費やしました。いくつかの変数データ項目（e.model.toJSON()）の元の状態を保存し、グリッドのedit場合に

• ：以下のアプローチを考えます。 toJSONは、剣道固有のフィールドとメソッドを削除し、データアイテムをプレーンJavaScriptオブジェクトに変換し、データアイテムが参照渡しされるときに自動的に更新される値を破棄するために必要です。グリッドのsave場合に

  edit: function(e) { 
      var model = e.model; 
      if (!originalDataItems[model.id]) { 
       originalDataItems[model.id] = model.toJSON(); 
      } 
  } 
  

• 、元のデータ項目値を含む新しいダーティ値を比較します。同じ場合は、カスタムCSSクラスをテーブルセルに適用します。 saveハンドラのコードをsetTimeoutにラップする必要があります。このイベントは編集済みのセルが閉じられて非編集モードに戻る前に起動されるためです。すべての保留中の変更が保存されている場合、すなわち、

  .no-dirty .k-dirty { 
      display: none; 
  } 
  

最後に

• は、originalDataItemsコレクションからすべての項目を削除します。

  save: function(e) { 
      setTimeout(function() { 
      e.sender.tbody.find(".k-dirty-cell").each(function() { 
       var cell = $(this); 
       var field = e.sender.columns[cell.index()].field; 
       var dataItem = e.sender.dataItem(cell.closest("tr")); 
  
       cell.toggleClass("no-dirty", 
        originalDataItems[dataItem.id][field] == dataItem[field]); 
      }); 
      }); 
  } 
  

• カスタムCSSクラスは、このような汚いマークを隠すために使用することができますsaveChangesイベント。ここで

  saveChanges: function() { 
      originalDataItems = {}; 
  } 
  

完全な例です：指摘する

http://dojo.telerik.com/ivOBU

一つは、汚れたマークが表示されませんにもかかわらず、それぞれのデータ項目は、まだdirtyとなるということですリモートデータサービスと同期する必要があります。 batch編集が使用されている場合は問題ありませんが、不要なデータ転送を防止する場合は、saveハンドラを強化し、変更されていないデータ項目のdirtyフィールドをfalseにリセットしてください。