handsontable cellProperties

`cellProperties` 是 Handsontable 的一个对象，用于设置单元格的元数据。该对象包含以下属性：

- `type`：字符串，指定单元格的类型。可选值包括 `autocomplete`、`checkbox`、`date`、`dropdown`、`handsontable`、`numeric`、`password`、`text` 和 `time`。
- `format`：字符串或对象，指定单元格的格式。对于 `type` 为 `date` 或 `time` 的单元格，该属性可以是一个字符串，指定日期或时间的格式。对于 `type` 为 `numeric` 的单元格，该属性可以是一个对象，指定数字格式化的参数。
- `validator`：函数，指定单元格的验证函数。该函数接受两个参数：`value` 和 `callback`。`value` 参数是单元格当前的值，`callback` 参数是验证完成后的回调函数。如果验证通过，调用 `callback(true)`，否则调用 `callback(false)`。
- `allowInvalid`：布尔值，指定是否允许单元格中的无效值。如果设置为 `false`，则无效值会被自动替换为上一次有效值。默认值为 `true`。
- `data`：数组，指定下拉菜单的选项列表。该属性仅在 `type` 为 `dropdown` 或 `autocomplete` 时有效。
- `source`：函数或数组，指定下拉菜单的数据源。如果是一个数组，则表示下拉菜单的选项列表。如果是一个函数，则在需要展示下拉菜单时，会调用该函数获取下拉菜单的选项列表。
- `readOnly`：布尔值，指定单元格是否只读。默认值为 `false`。
- `className`：字符串，指定单元格的 CSS 类名。
- `comment`：对象，指定单元格的注释。该属性是一个对象，包含以下属性：`readOnly`、`comment`、`className` 和 `placement`。
- `renderer`：函数，指定单元格的渲染函数。该函数接受 4 个参数：`instance`、`TD`、`row` 和 `col`。`instance` 是当前的 Handsontable 实例，`TD` 是单元格的 DOM 元素，`row` 和 `col` 分别是单元格所在的行和列。该函数可以修改单元格的显示内容。
- `editor`：函数或布尔值，指定单元格的编辑器。如果设置为 `false`，则该单元格不可编辑。如果设置为一个函数，则在需要编辑单元格时，会调用该函数生成一个编辑器。该函数接受 4 个参数：`hot`、`row`、`col` 和 `prop`。`hot` 是当前的 Handsontable 实例，`row` 和 `col` 分别是单元格所在的行和列，`prop` 是单元格的属性名。
- `height`：数字或字符串，指定单元格的高度。如果是一个数字，则表示像素值。如果是一个字符串，则可以是 `auto`（自适应高度）或 `100%`（父容器高度的百分比）。
- `width`：数字或字符串，指定单元格的宽度。如果是一个数字，则表示像素值。如果是一个字符串，则可以是 `auto`（自适应宽度）或 `100%`（父容器宽度的百分比）。
- `placeholder`：字符串，指定单元格的占位符。当单元格为空时，会显示该占位符。

以下是一个示例：

var hot = new Handsontable(document.getElementById('example'), {
  data: getData(),
  colHeaders: true,
  rowHeaders: true,
  contextMenu: true,
  columns: [
    {data: 'id'},
    {data: 'name', type: 'text', format: 'YYYY-MM-DD', readOnly: true, className: 'myClass', placeholder: 'Enter name here...', comment: {readOnly: false, comment: 'This is a comment', className: 'my-comment', placement: 'bottom'}, height: 'auto', width: 100, validator: function(value, callback) {
      if (value.length < 5) {
        callback(false);
      } else {
        callback(true);
      }
    }, renderer: function(instance, TD, row, col, prop, value, cellProperties) {
      TD.innerHTML = '<b>' + value + '</b>';
    }, editor: function(hot, row, col, prop) {
      var editor = document.createElement('input');
      editor.type = 'text';
      editor.value = hot.getDataAtCell(row, col);
      editor.addEventListener('blur', function() {
        hot.setDataAtCell(row, col, editor.value);
      });
      return editor;
    }}
  ]
});

在这个示例中，我们为第二列单元格设置了一些元数据，包括类型为 `text`、日期格式为 `YYYY-MM-DD`、只读、CSS 类名为 `myClass`、占位符为 "Enter name here..."、注释为 "This is a comment"、高度为自适应、宽度为 100 像素、验证函数为检查字符串长度是否大于等于 5、渲染函数为将单元格值加粗、编辑器为一个文本框。