javascript - Handsontable-根据单元格值自定义渲染器

我的动手操作中的一列具有以下要求：

根据不属于表的值来不同地设置单元格颜色。这是完整的代码-

http://jsfiddle.net/3b1nc46b/

var objectData = [
  {id: 1, name: "Ted Right", address: "NY", value:{old_value:"10", new_value:"15"}},
  {id: 2, name: "Frank Honest", address: "CA", value:{old_value:"12", new_value:"12"}},
  {id: 3, name: "Joan Well", address: "TX", value:{old_value:"20", new_value:"28"}}

];

var valueRenderer = function (instance, td, row, col, prop, value, cellProperties) {
var background_color = '';
if (value.old_value == value.new_value) {
    background_color = 'white';
} else {
    background_color = 'yellow';
}
value = value.new_value;
Handsontable.renderers.NumericRenderer.apply(this, arguments);
$(td).css({
  background: background_color
});

};

在这种情况下，如果“旧值”不等于“新值”，则“值”列需要染成黄色-如果不相等，则背景应为白色。首先，我将new_value和old_value放在数据源中的嵌套“值”项中。这可行，但是会产生其他问题：


当您单击一个单元格进行编辑时，它显示的是“ [object Object]”而不是值-这很有意义，因为我已经在列列表中传递了“ value”，而不是“ value.new_value”
不保留背景色


解决此问题的一种方法是让隐藏列包含old_value，并使用它比较和设置渲染器。但是，如果表有10列或更多列，并且如果每列都需要根据上述条件进行着色，则它很快就会变得太大（在保存功能期间也需要特殊处理）

做这个的最好方式是什么？

最佳答案

除了自定义渲染器之外，您还需要设置一个自定义编辑器。

然后，在自定义渲染器和编辑器中，您可以控制“保留”或更改背景颜色的逻辑。

我在这里回答了一个相关的问题：Binding Handsontable cells to complex objects。该示例未使用数字渲染器作为基础，因此您具有dom元素的完整控制。

我相信答案和问题中引用的许多文档将对您有所帮助。

最后，“在标题中呈现自定义HTML”部分下的documentation here示例似乎也与您的问题有些重叠。

关于javascript - Handsontable-根据单元格值自定义渲染器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26759217/