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'
    }
  ]
});