将 Handsontable 单元格绑定到复杂对象

Question

我正在尝试使用Handsontable 进行一些基本的编辑和数字格式设置。

数据，包括格式信息是从服务器获取的，看起来类似于：

var data = [
    [ { num:'1.1', color:'red' }, { num:'2.2', color:'green' } ],
    [ { num:'3.4', color:'yellow' }, { num:'4.4', color:'blue' } ]
];

现在，我想将此数据传递给我的Handsontable，并让每个单元格显示/编辑.num 值。通过使用自定义渲染器和编辑器（此处简要说明：Understanding cell functions），我找到了处理手动编辑的解决方案 - 请参阅此 JSFiddle：

http://jsfiddle.net/7akqc87x/5/

但是，这个解决方案有两个问题：

• 粘贴值（例如，来自 Excel）无法按预期工作 - 粘贴的值会完全覆盖绑定的对象，而不是更新其 .num 属性。
• 数字验证不起作用 - 如果我将 type: 'numeric' 添加到 cellProperties，第一个编辑的单元格将不会退出“编辑模式”，并且无法编辑更多单元格。

我在正确的轨道上吗？如果是这样，我该如何解决这两个问题？如果没有，是否有更简单（内置？）的方式将单元格绑定到自定义对象？

（我知道您可以将整行绑定到自定义对象 - Object data source - 但我还没有找到针对单个单元格的解决方案）

Answer 1

自定义单元格渲染：

在您的 Hands On Table 设置中，您可以添加以下内容以将数字和颜色显示为对象的背景颜色：

renderer: function(instance, td, row, col, prop, value, cellProperties) {
  if(value){
    td.innerHTML = value.num;
    td.style.backgroundColor = value.color;
  }
  return td;
},

http://docs.handsontable.com/0.18.0/demo-custom-renderers.html

听起来您可以设置自定义编辑器，如果没有，这里有说明： http://docs.handsontable.com/0.18.0/tutorial-cell-editor.html

我不知道用这个从 excel 粘贴，至少自定义编辑器只需要一个参数。无论如何，只有一个会来自excel。也许使用钩子是一个很好的调查方法。此外，可能希望从扩展上述文档中解释的默认编辑器开始，而不是完整的自定义编辑器。

---

将类型设置为数字不起作用，因为它需要一个数字而不是自定义对象。 “类型”预定义了一组渲染器、编辑器和验证器，就像他们在您找到的文档中给出的示例一样：

 {
  renderer: Handsontable.NumericRenderer,
  editor: Handsontable.editors.TextEditor,
  validator: Handsontable.NumericValidator
}

https://github.com/handsontable/handsontable/wiki/Understanding-cell-functions