Slickgridカスタムセルエディタですべてのセルが更新される

Question

http://mleibman.github.io/SlickGrid/examples/example3a-compound-editors.htmlのコードを少しカスタマイズして、分子と分母を取り込んだカスタムエディタを提供し、値が更新されるとそのパーセンテージを表示します（カスタムフォーマッタコード：

）。

function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { 
     return isNaN(dataContext.from/dataContext.to) ? "" : ((dataContext.from/dataContext.to) * 100).toFixed(2) + "%"; 
    } 

期待どおりに動作しますが、カスタムエディタ/フォーマッタを使用して複数の列が指定されていると、行内のセルを編集するとグリッジが発生することがあります。そのエディタを使用する残りのセルは同じ値に更新されます。私の列が以下のように定義されている

： -

var columns = [ 
    {id: "indicator", name: "Indicator", field: "indicator", width:300}, 
    { id: "apr", name: "April", field: "apr", width: 100, formatter: NumericRangeFormatter, editor: NumericRangeEditor }, 
    { id: "may", name: "May", field: "may", width: 100, formatter: NumericRangeFormatter, editor: NumericRangeEditor }, 
    { id: "jun", name: "June", field: "jun", width: 100,formatter: NumericRangeFormatter, editor: NumericRangeEditor } 
    ]; 

をだから私は「4月」列のセルを編集した場合、基本的には、両方のための細胞のは月 'と同じに「6月」更新値。私はこの振る舞いを望まない。

エディタの値を処理するコードで明らかに間違ったことはありません。私はのガイダンスを読んでいます。

紛失しているものがありますか？編集者のためのコードは以下の通りです： -

function NumericRangeEditor(args) { 
     var $from, $to; 
     var scope = this; 
     this.init = function() { 
      $from = $("<INPUT type=text style='width:40px' />") 
       .appendTo(args.container) 
       .bind("keydown", scope.handleKeyDown); 
      $(args.container).append("&nbsp;/&nbsp;"); 
      $to = $("<INPUT type=text style='width:40px' />") 
       .appendTo(args.container) 
       .bind("keydown", scope.handleKeyDown); 
      scope.focus(); 
     }; 

     this.handleKeyDown = function (e) { 
      if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT || e.keyCode == $.ui.keyCode.TAB) { 
       e.stopImmediatePropagation(); 
      } 
     }; 

     this.destroy = function() { 
      $(args.container).empty(); 
     }; 

     this.focus = function() { 
      $from.focus(); 
     }; 

     this.serializeValue = function() { 
      return { from: parseInt($from.val(), 10), to: parseInt($to.val(), 10) }; 
     }; 

     this.applyValue = function (item, state) { 
      item.from = state.from; 
      item.to = state.to; 
     }; 

     this.loadValue = function (item) { 
      $from.val(item.from); 
      $to.val(item.to); 
     }; 

     this.isValueChanged = function() { 
      return args.item.from != parseInt($from.val(), 10) || args.item.to != parseInt($from.val(), 10); 
     }; 

     this.validate = function() { 
      if (isNaN(parseInt($from.val(), 10)) || isNaN(parseInt($to.val(), 10))) { 
       return { valid: false, msg: "Please type in valid numbers." }; 
      } 
      if (parseInt($from.val(), 10) > parseInt($to.val(), 10)) { 
       return { valid: false, msg: "'from' cannot be greater than 'to'" }; 
      } 
      return { valid: true, msg: null }; 
     }; 
     this.init(); 
    } 

Answer 1

あなたは同じフォーマッタ/エディタを使用する、すなわち[apr,may,jun]列を持っています。

問題は、toとfromのdataContext内の同じフィールドを参照していることです。 [apr,may,jun]のいずれかの列でエディタを開くと、フィールドtoとfromが上書きされます。したがって、フォーマッタが参照と同じフィールドを使用するので、変更は他のカラムにも反映されます。

これを解決するには、毎月の値を保存するためにdataContextに新しいフィールドを追加する必要があります。 aprilTo、aprilFrom、mayTo、mayFrom、junTo、junFrom。

function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { 
     return isNaN(dataContext[columnDef.field + 'From']/dataContext[columnDef.field + 'To']) ? "" : ((dataContext[columnDef.field + 'From'] /dataContext[columnDef.field + 'To']) * 100).toFixed(2) + "%"; 
} 

：次に、に

this.applyValue = function (item, state) { 
     item[args.column.field + 'From'] = state.from; 
     item[args.column.field + 'To'] = state.to; 
};` 

フォーマッタにあなたのエディタを変更