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设置中，您可以添加以下内容以将num和颜色显示为对象的背景颜色：

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中粘贴这个，至少自定义编辑器只需要一个参数。无论如何，只有一个来自excell。也许有钩子将是一个很好的方法来调查。此外，可能希望首先扩展上述文档中解释的默认编辑器，而不是完整的自定义编辑器。

将类型设置为数字并不起作用，因为它期望数字不是自定义对象。＆＃39;类型＆＃39;预定义一组渲染器，编辑器和验证器，作为它们在您找到的文档中给出的示例：

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

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

将Handsontable单元绑定到复杂对象

1 个答案: