Javascript 如果一个具有多个列且每个列使用不同的渲染器的掌上电脑，我如何在数据更新时更改单个单元格的背景颜色？

我构建了一个handonstable，根据数据类型（可以是数字、文本或自定义），每个列都有自己的呈现程序。我想在用户更改这些列中任何一列的字段时更新单元格的颜色，以表示其已更改

---

我的问题是，我不能真正设置自定义onUpdate渲染器，因为这将覆盖所有现有的渲染器。有什么想法吗？

您可以使用

getCellMeta

为特定单元格而不是整个列设置渲染器：

afterChange: function(changes, source){
    if (source !== 'loadData' && source !== 'afterChange') {
      changes.forEach(function(cellchanges) {
        var row = cellchanges[0];
        var col = hot.propToCol(cellchanges[1]);
        hot.getCellMeta(row, col).renderer = textHasChangedRenderer;
    });
  }
}

要记住两件事：

1） 您需要一系列“has changes”渲染器来覆盖默认渲染器和自定义渲染器：

var textHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var numberHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var dateHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.DateRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var customHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  customRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};

---

2） 将文本渲染器指定给数字列将破坏格式设置，因此您需要以某种方式跟踪初始渲染器到列的分配。

您可以使用

getCellMeta设置特定单元格的渲染器，而不是整列的渲染器。

：

afterChange: function(changes, source){
    if (source !== 'loadData' && source !== 'afterChange') {
      changes.forEach(function(cellchanges) {
        var row = cellchanges[0];
        var col = hot.propToCol(cellchanges[1]);
        hot.getCellMeta(row, col).renderer = textHasChangedRenderer;
    });
  }
}

要记住两件事：

1） 您需要一系列“has changes”渲染器来覆盖默认渲染器和自定义渲染器：

var textHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var numberHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var dateHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.DateRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var customHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  customRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};

2） 将文本渲染器指定给数值列将破坏格式设置，因此您需要以某种方式跟踪初始渲染器到列的指定