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

所以，基本上，如果我在'April'列中编辑一个单元格，'May'和'June'的单元格将更新为相同的值。我不想要这种行为。

我在编辑器中处理值的代码中看不到任何明显错误，我在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上添加新字段以存储每个月的值，例如4月4日，4月，5月，6月，6月6日。然后，将编辑器更改为

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

Slickgrid自定义单元格编辑器更新所有单元格

1 个答案: