摘要：原文發布于個人博客歡迎訪問簡介是一個類似表格編輯器，支持豐富的展現和交互，以及多樣的單元格展現和配置核心由原生編寫，通過打包同類項目中，點贊最多，列表官網地址支持的特征的一些主要功能這里只列出主要功能，想了解更多更能，可以查詢官方文檔。這

原文發布于個人博客>>歡迎訪問

HandsonTable 簡介

Handsontable 是一個類似 excel 表格編輯器，支持豐富的展現和交互，以及多樣的單元格展現和配置

核心由原生 js (es6) 編寫，通過webpack打包

同類 Jspreadsheets 項目中，點贊最多，Jspreadsheets列表

官網地址

HandsonTable 支持的特征

Handsontable 的一些主要功能：

edit

Context menu

Drag-down

Dropdown

Freezing

Merge cells

Comments

Data validation

Custom HTML

sortingtable

這里只列出主要功能，想了解更多更能，可以查詢官方文檔。這里附一張官方demo圖：

Handsontable 的核心可以分為配置，事件，方法三個方面：

引入handsontable包，

new 一個 Handsontable 實例

// 新建Hansontable實例
var container = document.getElementById("dataGrid");
var hot = new Handsontable(container, options); // options 如下

// Handsontable 的一些主要配置
var options = {
    data: Array || Object, // data 是整個表格的數據源，可以接收一個二維數組，或者一個對象
    rowHeaders: Boolean || Array || function,
    colHeaders: Boolean || Array || function,
    cells: function,     // row, col, prop
    stretchH: String,  // "all", "none", "last",
    columns: Array || function,
    columnSorting: Boolean || Object,
    manualColumnResize: true,
    renderer: function,
}

然后說一下上面每一個配置項的用法：

data
data 是整個表格的數據源，可以接收一個二維數組，或者一個對象

// 作為數組
data = [
      ["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
      ["2012", 10, 11, 12, 13, 15, 16],
      ["2013", 10, 11, 12, 13, 15, 16],
      ["2014", 10, 11, 12, 13, 15, 16],
      ["2015", 10, 11, 12, 13, 15, 16],
      ["2016", 10, 11, 12, 13, 15, 16]
    ];
    
// 相應配置(每一列顯示哪些數據由columns決定)    
new Handsontable(container, {
    data: data,
    colHeaders: true,
    columns: [
      {data: 0},
      {data: 2},
      {data: 3},
      {data: 4},
      {data: 5},
      {data: 6}
    ]
  });  
  
// 作為對象數據
data = [
      {id: 1, name: "Ted Right", address: ""},
      {id: 2, name: "Frank Honest", address: ""},
      {id: 3, name: "Joan Well", address: ""},
      {id: 4, name: "Gail Polite", address: ""},
      {id: 5, name: "Michael Fair", address: ""},
    ];

new Handsontable(container5, {
    data: data,
    colHeaders: true,
    columns: [
      {data: "id"},
      {data: "name"},
      {data: "address"}
    ],
  });        
    

rowHeaders
rowHeaders屬性用來設置表格每一行的標題，有三種形式：

// 若為 true, 則行標題從1開始，依次往后
{
    rowHeaders: true,
}

// 設置為數組, 則按數組內容顯示
{
    rowHeader: [1, 2, 3, 4, 5]
}

// 函數，接收一個index參數，更加靈活
{
    rowHeader: function(index) {
        return index + "AB";
    }
}

cells
cells屬性用來設置每個單元格的屬性

// 設置第一列只讀
{
    cells: function (row, col, prop) {
        var cellProperties = {};
        
        if (col === 0) {
            cellProperties.readOnly = true;
        }
        
        return cellProperties;
    }
}

stretchH
stretchH 屬性用來設置表格的展開方式，all 全列按最大寬度展開; none 緊縮的表格; last 最后一列展開

{
    stretchH: "all" // all 全列按最大寬度展開; none 緊縮的表格; last 最后一列展開
}

columns
columns屬性，用來定義列屬性，也就是每一列需要顯示數據源的哪個屬性。除此之外，也可以定義每一列的數據屬性，

{
    columns: [
      {data: "id"},     // 第一列顯示 id 屬性
      {data: "name"},   // 第二列顯示 name 屬性
      {data: "age", type: "numeric"},   // 第三列顯示 age 屬性,并且只能填數字
      {data: "address"} // 第四列顯示 address 屬性
    ],
}

columnSorting
columnSorting 用來設置表格的列是否可排序，

renderer
renderer 屬性可以自定義單元格的各種屬性

// 第三行有數據的單元格涂色
{
    renderer: function (instance, td, row, col, prop, value, cellProperties) {
        // 渲染為text類型，可選的有TimeRenderer、PasswordRenderer等不同的類型
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        // 判斷條件
        if (value && row === 2) {
            td.style.backgroundColor = "#e0ecff";
        }
    }
}

生成 Handsontable 實例之后，一張表格就顯示好了，如果想加入更多交互效果，就需要注冊監聽事件。

// 實例對象
var hot = new Handsontable(container, options);

// 用實例方法addHook注冊事件
hot.addHook(key, callback); // key 為事件名

// 除了addHook 方法之外，也可以將事件名，寫入配置中
{
    afterChange: function (change) {}
}

afterChange
afterChange 在單元格改變時觸發，如編輯單元格之后,接收兩個參數changeData, source

hot.addHook("afterChange", function (changeData, source) {
    // changeData 是一個數組，第一個元素(數組)，記錄所有修改信息
    if (!changeData) return;
    var change = changeData[0],
        row = change[0],
        colProp = change[1],
        preData = change[2],
        newData = change[3];
})

afterOnCellMouseDown
afterOnCellMouseDown 在鼠標點擊單元格之后觸發

// afterOnCellMouseDown 在鼠標點擊單元格之后觸發,接收兩個參數 event cellCoords
// event 標準鼠標點擊事件
// cellCoords 對象，保存row,col信息

hot.addHook("afterOnCellMouseDown ", function (event, cellCoords) {
    var row = cellCoords.row,
        col = cellCoords.col;
})

afterBeginEditing
afterBeginEditing 在單元格開始編輯時觸發

hot.addHook("afterBeginEditing", function (row, col) {})

getCell
getCell(row, col) 獲取指定單元格

alter
alter(action, index, amount, source, keepEmptyRows) alter方法用于改變表格結構，即插入或刪除行列數據。

action 可用改變表格結構操作insert_row、insert_col、remove_row、remove_col

index行列索引值，從0開始，insert操作將插入到該索引值的前一行/列

amount（可選，默認1）：將要插入/刪除的行列數

source（可選）：行或列對象

keepEmptyRows（可選）：防止刪除空行，true/false

setDataAtCell
setDataAtCell(row, col, value, source) 設置某個單元格的數據

row 行號索引
col 列號索引
value 將要設置的單元格數據
source （可選）字符串標識中描述這一變化將如何改變數組(用于onAfterChange或onBeforeChange回調)

如下代碼所示，生成的表格主體在ht_master中，rowHeader、colHeader 和freezingCol會clone主體部分內容，放在其兄弟節點。同時，edit時的input會生成唯一一個textarea。

原文發布于個人博客>>歡迎訪問