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

格式化为：

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