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 } 
    ]; 

所以，基本上，如果我編輯的「四月」列的單元格中，細胞都「五一」和「月」更新到相同值。我不想要這種行爲。

在處理編輯器中的值的代碼中，我看不到任何明顯錯誤，我已閱讀https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors上的指導。

有什麼明顯的我失蹤了嗎？代碼編輯低於： -

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]使用同一格式/編輯器。

問題是你在引用dataContext中的相同字段，它們是to和from。如果您在任何一列[apr,may,jun]上打開編輯器，則會覆蓋to和from的字段。因此，任何更改都反映到其他列，因爲格式化程序使用與參考相同的字段

要解決此問題，您必須在dataContext上添加新字段以存儲每個月的值。四月，四月，mayTo，mayFrom，junTo，jun來自。然後，你的編輯器改變

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

格式化程序：

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) + "%"; 
}