Question

我的handsontable中的一个列有以下要求：

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

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

};

如果old_value不等于new_value，则“Value”列需要显示为黄色 - 如果不是，则背景应为白色。首先，我将new_value和old_value放在数据源中的嵌套“value”项中。这有效，但它会产生其他问题：

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

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

这样做的最佳方式是什么？

Answer 1

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

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

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

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

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

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

1 个答案: