Handsontable单元格类型

学习重点
注册一个单元格类型
预览内置和自定义单元格类型
单元格类型的解剖

注册一个单元格类型

当您创建一个自定义单元格类型时，一个好的做法是将它作为一个别名分配给以下默认类型。
Handsontable默认定义9个默认类型：

autocomplete for Handsontable.cellTypes.autocomplete
checkbox for Handsontable.cellTypes.checkbox
date for Handsontable.cellTypes.date
dropdown for Handsontable.cellTypes.dropdown
handsontable for Handsontable.cellTypes.handsontable
numeric for Handsontable.cellTypes.numeric
password for Handsontable.cellTypes.password
text for Handsontable.cellTypes.text
time for Handsontable.cellTypes.time

它为用户提供了一种方便的方式来定义应该使用哪个单元格类型来描述单元格属性。用户不需要知道代码的哪一部分负责呈现、验证或编辑单元格值，他甚至不需要知道有任何函数。更重要的是，您可以更改与别名相关联的单元格行为，而不需要更改定义单元属性的代码。

要注册自己的别名，请使用Handsontable.cellTypes.registerCellType()函数。它有两个参数：
cellTypeName - 表示单元格类型
type - 具有键编辑器、渲染器和验证器的对象，该对象将由cellTypeName表示

如果您想在别名copyable-password下注册copyablePasswordType，则必须调用copyable-password

Handsontable.cellTypes.registerCellType('copyable-password', {
  editor: copyablePasswordEditor,
  renderer: copyablePasswordRenderer,
});

明智地选择别名。如果您在已注册的名称下注册单元格类型，目标函数将被覆盖

Handsontable.cellTypes.registerCellType('password', {
  editor: copyablePasswordEditor,
  renderer: copyablePasswordRenderer,
});

//现在“password”别名指向新创建的对象，而不是Handsontable.cellTypes.password

因此，除非您有意覆盖现有的别名，否则请尝试选择一个惟一的名称。

Handsontable.cellTypes.registerCellType('copyable-password', {
  editor: copyablePasswordEditor,
  renderer: copyablePasswordRenderer,
});

// 有人可能已经注册了这样的别名。

Handsontable.cellTypes.registerCellType('my.copyable-password', {
  editor: copyablePasswordEditor,
  renderer: copyablePasswordRenderer,
});

// 这样好多了

使用别名
总之，一个准备良好的单元格类型对象应该如下所示：

(function(Handsontable){
  var MyEditor = Handsontable.editors.TextEditor.prototype.extend();

  function customRenderer(hotInstance, td, row, column, prop, value, cellProperties) {
    // ...renderer logic
  }

  function customValidator(query, callback) {
    // ...validator logic
    callback(/* Pass `true` or `false` */);
  }

  // Register an alias
  Handsontable.cellTypes.registerCellType('my.custom', {
    editor: MyEditor,
    renderer: customRenderer,
    validator: customValidator,
    // 您可以根据Handsontable设置向单元类型添加其他选项
    className: 'my-cell',
    allowInvalid: true,
    // 或者可以添加自定义属性，可以在cellProperties中访问
    myCustomCellState: 'complete',
  });

})(Handsontable);

从现在开始，您可以像这样使用单元格定义:

var hot = new Handsontable(document.getElementById('container'), {
  data: someData,
  columns: [
    {
      type: 'my.custom'
    }
  ]
});