给定一个包含多个列的手动表格，每个列都使用不同的渲染器，如何在数据更新时更改单个单元格的背景颜色？

Posted 2023-03-22

【中文标题】给定一个包含多个列的手动表格，每个列都使用不同的渲染器，如何在数据更新时更改单个单元格的背景颜色？

【英文标题】：Given a handsontable with multiple columns each using a different renderer, how can I change individual cell background-color upon data update?

【发布时间】：2018-07-04 01:18:08

【问题描述】：

我构建了一个handonstable，每个列都有自己的渲染器，具体取决于数据类型（可以是数字、文本或自定义）。我想在用户更改任何这些列的字段时更新单元格的颜色以表示其已更改。

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

【参考方案1】：

您可以使用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) 您需要一系列“变化”渲染器来覆盖默认渲染器和自定义渲染器：

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) 将文本渲染器分配给数字列会破坏格式，因此您需要以某种方式跟踪初始渲染器到列的分配。