Handsontable -单元格功能

在Handsontable中的每个单元格，都有三个相关的功能。
renderer
editor
validator
每个函数都负责不同的单元格行为。您可以单独定义它们，或者使用单元格类型同时定义这三种类型。我们现在将详细讨论上述功能的目的。

Renderer

Handsontable不直接显示存储在数据源中的值。相反，每当需要在表单元格中显示来自数据源的值时，都会将其与HTMLTableCellElement (DOM节点)类型的表单元对象以及其他有用信息一起传递给单元格renderer 函数。
renderer 期望将传递的值格式化，并将其作为单元格对象的内容。Renderer 还可以修改单元格 class 列表，例如，它可以添加一个htInvalid class以让用户知道显示的值无效。

单元格预定义的渲染器

Handsontable有5个预定义的渲染器，您可以在编写自己的渲染器时扩展。
TextRenderer
NumericRenderer
AutocompleteRenderer
CheckboxRenderer
PasswordRenderer

TextRenderer是所有单元格的默认渲染器。如果您编写自己的渲染器，您很可能会希望在某个时候运行这个渲染器，因为它会将单元格标记为只读或无效，但是调用TextRenderer并不是必需的。

在单元渲染函数中添加事件监听器

如果您正在编写一个高级单元格渲染器和您想要添加一些自定义的行为在某个用户操作后(即用户一个鼠标悬停在一个单元格)你可能会添加一个事件监听器直接将表格单元节点作为参数传递给渲染器的功能。不幸的是，这几乎总是会给您带来麻烦，您最终可能会遇到性能问题，或者让侦听器连接到错误的单元格上。
这是因为Handsontable：
调用渲染器：每个单元格执行多次函数——这会导致同一个事件侦听器的多个副本附加到一个单元格上；
在表滚动和增加/删除新行/新列，这可能导致事件监听器连接到错误的单元格。
在决定在单元格渲染器中附加事件侦听器之前，请确保没有适合您需要的Handsontable事件。使用Handsontable事件系统是响应用户操作的最安全的方式。
如果没有找到合适的Handsontable事件，则将单元格内容放入包装的

中，将事件监听器附加到包装器上，然后将其放入表单元格中。

性能

在每个表呈现期间，每个显示单元都分别调用单元渲染器。表可以在其使用期间多次呈现(表滚动后、表排序后、单元格编辑后等)。因此，您应该尽可能保持渲染器功能的简单和快速，否则可能会出现性能下降，特别是在处理大型数据集时。

Renerer模板

Editor
单元格编辑器是最复杂的单元格函数。我们准备了一个[单独的页面|自定义单元格编辑器]]来解释单元格编辑是如何工作的，以及如何编写您自己的单元格编辑器。

Validator
单元格验证器可以是函数，也可以是正则表达式。当validator函数调用回调(作为一个验证器参数传递)并带有true或validation regex test()方法返回true时，计算单元被认为是有效的。因为值的有效性仅由传递给回调的参数决定，所以validator函数可以是同步的，也可以是异步的。
与渲染器和编辑器函数相反，验证器函数不必为每个单元定义。如果验证器函数没有定义，那么单元格值总是有效的。

Cell type
每个表单元格都有3个函数:渲染器、编辑器和(可选)验证器。大多数时候，这些函数是紧密相连的。例如，如果你想在单元格中存储一个日期，您很可能会使用渲染器，它将使用适当的格式显示日期 (dd/mm/yyy, yyy-mm-dd etc.)。您还将使用一个编辑器，它将显示一个日历，而不是默认的文本输入，因此用户可以轻松地选择正确的日期。最后，您可能想要检查用户输入的值是否有效。手工为单元或列定义这些函数将非常繁琐，因此为了简化配置，Handsontable引入了单元类型。
单元类型由字符串表示，即。“文本”、“数字”、“日期”。每个字符串在内部映射到与此类型关联的函数。例如，“数字”类型与下面的函数相关联：
Handsontable.renderers.NumericRenderer
Handsontable.editors.TextEditor
Handsontable.validators.NumericValidator
而不是写L

var hot = new Handsontable(document.getElementById('container'), {
  columns: [
    {
      renderer: Handsontable.renderers.NumericRenderer,
      editor: Handsontable.editors.TextEditor,
      validator: Handsontable.validators.NumericValidator,
    }
  ]
});

你可以简单地写

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

当Handsontable遇到一个定义了类型选项的单元格时，它会检查该类型引用的单元格函数并使用它们。

原生类型

Handsontable有9种类型

text
numeric
date
checkbox
password
select
dropdown
autocomplete
handsontable

文本单元格类型是默认类型

优先

可以将type选项与诸如渲染器、编辑器或验证器等选项一起定义。让我们看一下这个例子。

var hot = new Handsontable(document.getElementById('container'), {
  columns: [
  {
    type: 'numeric',
    validator: customValidator //验证器函数定义的其他地方
  }
]
});

我们为列中的所有单元格定义为数值类型。除此之外，我们还直接定义了一个验证器函数。在Handsontable中，直接定义的单元格函数总是优先于与单元格类型相关的函数，因此上面的配置相当于：

var hot = new Handsontable(document.getElementById('container'), {
  columns: [
    {
      renderer: Handsontable.renderers.NumericRenderer,
      editor: Handsontable.editors.TextEditor,
      validator: customValidator
    }
  ]
});

还有一种方法可以使用类型定义配置

var hot = new Handsontable(document.getElementById('container'), {
  validator: customValidator, // validator function defined elsewhere
  columns: [
    {
      type: 'password'
    },
    {}
  ]
});

我们利用级联配置，定义一个包含两列的表，并将validator设置为customValidator函数。我们还将第一列的类型设置为password。密码单元类型不定义验证器函数：

renderer: Handsontable.renderers.PasswordRenderer,
editor: Handsontable.editors.PasswordEditor,
validator: undefined

因为type: ‘password’是第一列中单元格的一个更具体的配置，而不是验证器:customValidator，与密码类型关联的单元函数优先于更高级别配置中定义的函数。因此，等效构型为：

var hot = new Handsontable(document.getElementById('container'), {
  columns: [
    {
      renderer: Handsontable.renderers.PasswordRenderer,
      editor: Handsontable.editors.PasswordEditor,
      validator: undefined
    }
    {
      renderer: Handsontable.renderers.TextRenderer, // 文本单元类型是默认类型
      editor: Handsontable.editors.TextEditor, // 文本单元类型是默认类型
      validator: customValidator
    }
  ]
});

单元格功能getters

如果由于某种原因，您必须获得特定单元格的呈现器、编辑器或验证器函数，您可以使用标准的getCellMeta(row, col)方法来获取特定单元格的所有属性，然后引用单元格函数：

var cellProperties = $('#container').handsontable('getCellMeta', 0, 0);
// 获取单元格的属性[0,0]
cellProperties.renderer; // 获取单元格的 renderer
cellProperties.editor; // 获取单元格的editor
cellProperties.validator; // 获取单元格的 validator

但是，您必须记住getCellMeta()返回“它们是”的单元格属性，这意味着如果您使用单元格类型来设置单元格函数，而不是直接定义函数，那么这些单元格函数将是undefined的。

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

var cellProperties = hot.getCellMeta(0, 0); // get cell properties for cell [0, 0]
cellProperties.renderer; // undefined
cellProperties.editor; // undefined
cellProperties.validator; // undefined
cellProperties.type; // "numeric"

要获得实际的单元格函数，请使用适当的单元格函数getter：

getCellRenderer(row, col)
getCellEditor(row, col)
getCellValidator(row, col)
无论单元格函数是直接定义的，还是使用单元格类型，这些函数总是返回一个适当的值。