Slickgrid Custom Cell Editor aktualisiert alle Zellen

Question

Ich habe den Code bei http://mleibman.github.io/SlickGrid/examples/example3a-compound-editors.html leicht angepasst, um mich mit einem benutzerdefinierten Editor, der einen Zähler und Nenner und zeigt den Prozentsatz, sobald die Werte aktualisiert werden (benutzerdefinierte Formatierercode unten): -

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

Dies funktioniert wie erwartet, aber ich habe festgestellt, dass, wenn ich mehr als eine Spalte als mit dem dort benutzerdefinierten Editor/Formatierer identifiziert haben scheint, dass eine Störung zu sein, wenn ich eine Zelle in einer Zeile bearbeiten, Der Rest der Zellen, die diesen Editor verwenden, wird auf den gleichen Wert aktualisiert.

Meine Spalten wie unten definiert ist: -

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

Also, im Grunde, wenn ich eine Zelle in der ‚April‘ Spalte, die Zellen für beide ‚Mai‘ und Update ‚June‘ bearbeiten, um die gleichen Wert. Ich will dieses Verhalten nicht.

Ich kann nichts offensichtlich falsch in dem Code sehen, der Werte im Editor behandelt, und ich habe die Anleitung unter https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors gelesen.

Ist etwas offensichtlich, das ich vermisse? Code für den Editor ist unter: -

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

Sie haben Spalten nämlich [apr,may,jun], die die gleiche Formatierer/Editor verwenden.

Das Problem ist, dass Sie die gleichen Felder innerhalb des DataContext referenzieren, die to und from sind. Wenn Sie einen Editor für eine der Spalten [apr,may,jun] öffnen, überschreiben Sie die Felder to und from. Daher spiegeln sich alle Änderungen auch in anderen Spalten wider, da der Formatierer dieselben Felder wie die Referenz

verwendet. Um dies zu beheben, müssen Sie neue Felder in dataContext hinzufügen, um die Werte für jeden Monat z. April, April, Mai, Mai, Juni, Juni. Ändern Sie dann den Editor zu

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