handsontable-developer guide-cell function

renderer

展示的数据不是来自于数据源，而是先把DOM和其他信息传给renderer，然后展示。

//五种展示函数
TextRenderer： default
NumericRenderer
AutocompleteRenderer
CheckboxRenderer
PasswordRenderer

自己不能给cell加listener的原因：1、一个cell会多次调用renderer，可能会导致它有多个相同事件监听器；2、cell CRUD scrolling，可能导致cell和listener绑定错误。如果一定要这样做，需要把cell content放在div中，给div加监听器

renderer函数尽可能的快和简洁

editor

validator

可以是函数或者regex；与renderer和editor相比，validator不需要为每个元素都定义。

renderer，editor，validator是相互联系的

handsontable定义了一些type，来系列化这三个函数，好处如下：

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

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

预定义的类型

text
numeric
date
checkbox
password
select
dropdown
autocomplete
handsontable

//function的优先级高于type
var hot = new Handsontable(document.getElementById('container'), {
  columns: [
  {
    type: 'numeric',
    validator: customValidator // validator function defined elsewhere
  }
]
});

//type='password'没有定义validator，比函数更特殊。
var hot = new Handsontable(document.getElementById('container'), {
  validator: customValidator, // validator function defined elsewhere
  columns: [
    {
      type: 'password'
    },
    {}
  ]
});
相当于
var hot = new Handsontable(document.getElementById('container'), {
  columns: [
    {
      renderer: Handsontable.PasswordRenderer,
      editor: Handsontable.editors.PasswordEditor,
      validator: undefined
    }
    {
      renderer: Handsontable.TextRenderer, // text cell type is the default one
      editor: Handsontable.editors.TextEditor, // text cell type is the default one
      validator: customValidator
    }
  ]
});

//通过function定义的才可以，如果通过type定义的，则返回undefined
var cellProperties = $('#container').handsontable('getCellMeta', 0, 0);
// get cell properties for cell [0, 0]
cellProperties.renderer; // get cell renderer
cellProperties.editor; // get cell editor
cellProperties.validator; // get cell validator

//通过function或者type定义的都可以
getCellRenderer(row, col)
getCellEditor(row, col)
getCellValidator(row, col)

handsontable-developer guide-cell function

推荐阅读