将可手动操作的单元格绑定到复杂对象 [英] Binding Handsontable cells to complex objects

问题描述

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

I'm trying to use Handsontable for some basic editing and number formatting.

数据(包括格式设置信息)是从服务器获取的，看起来像这样:

The data, including formatting info is fetched from the server and would look similar to this:

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

现在，我想将此数据传递到我的Handsontable，并让每个单元格显示/编辑.num值.通过使用自定义渲染器和编辑器(在此处简要说明:了解单元格功能)，我找到了一种可以进行手动编辑的解决方案-参见此JSFiddle:

Now, I would like to pass this data to my Handsontable and have each cell display/edit the .num values. By using a custom renderer and editor (briefly explained here: Understanding cell functions), I have found a solution that handles manual editing - see this JSFiddle:

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

但是，此解决方案有两个问题:

However, there are two problems with this solution:

• 粘贴值(例如从Excel中)不能按预期方式工作-粘贴的值会完全覆盖绑定的对象，而不是更新其.num属性.
• 数字验证不起作用-如果将type: 'numeric'添加到cellProperties，则第一个已编辑的单元格将不会退出编辑模式"，并且无法再编辑其他单元格.

• Pasting values (e.g. from Excel) doesn't work as intended - the pasted values completely overwrite the bound objects instead of updating their .num properties.
• Numeric validation doesn't work - if I add type: 'numeric' to the cellProperties, the first edited cell won't exit "edit mode", and no more cells can be edited.

我在这里正确吗?如果是这样，我该如何解决这两个问题?如果不是，是否存在一种将单元格绑定到自定义对象的简便方法(内置?)?

Am I on the right track here? If so, how can I fix these two problems? If not, is there an easier (built-in?) way of binding cells to custom objects?

(我知道您可以将整行绑定到自定义对象-对象数据源-但我还没有找到单个单元格的解决方案)

(I am aware that you can bind an entire row to a custom object - Object data source - but I haven't found a solution for individual cells)

推荐答案

自定义单元格渲染:

在动手操作表"设置中，您可以添加以下内容以将数字和颜色显示为对象的背景色:

In your Hands On Table settings you can add the following to display the num and the color as the background color from your object:

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

Sounds like you were able to setup a custom editor, if not you there are instructions here: http://docs.handsontable.com/0.18.0/tutorial-cell-editor.html

我不知道如何从excel粘贴，至少自定义编辑器只需要接受一个参数.无论如何，只有一个来自excell.也许使用钩子可以对此进行研究.另外，可能想从扩展上面文档中也解释过的默认编辑器开始，而不是扩展一个完整的自定义编辑器.

I don't know about pasting from excel with this, at the very least the custom editor would need to take only a single argument. Only one is going to come from excell anyway. Perhaps with hooks would be a good method to investigate for that. Also, probably would want to start by extending the default editor also explained in the above docs rather than a complete custom one.

将类型设置为数字不起作用，因为它期望数字不是自定义对象. 类型"预先定义了一组渲染器，编辑器和验证器，作为它们在您找到的文档中提供的示例:

Setting the type to numeric doesn't work as it expects a number not a custom object. The 'types' predefine a set of renderer, editor and validator as the example they give in the documentation you found:

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

https://github.com/handsontable/handsontable/wiki/Understanding-细胞功能

这篇关于将可手动操作的单元格绑定到复杂对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！