Редактор пользовательских ячеек 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 для хранения значений для каждого месяца, например. aprilTo, aprilFrom, mayTo, mayFrom, junTo, junFrom. Затем измените ваш редактор

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

Formatter для:

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