導(dǎo)語：

最近在做一個關(guān)于報表管理的項目，發(fā)現(xiàn)了一款很好用的jQuery插件-Handsontable。它真的特別給力，在 Excel 中可進(jìn)行的操作，你幾乎都可以在網(wǎng)頁中做到，如拖動復(fù)制、Ctrl+C 、Ctrl+V 、編輯等等。另外在瀏覽器支持方面，它支持以下的瀏覽器 IE7+, FF, Chrome, Safari, Opera。

一、安裝

有很多方法可以安裝Handsontable,最方便的是使用包管理器

npm install handsontable --save

or

bower install handsontable --save

下載下來本地引入也可以

• Download ZIP
• Download from nuget

二、初始化

var data = [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2016", 10, 11, 12, 13],
["2017", 20, 11, 14, 13],
["2018", 30, 15, 12, 13]
];
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
});

結(jié)果

一個簡單的Excel電子表格就出來了，另外handsontable使用JSON格式數(shù)據(jù)綁定數(shù)據(jù)源(data屬性)，能夠處理大量的數(shù)據(jù)。

三、基本屬性配置

標(biāo)題

• 縱向標(biāo)題
  rowHeaders:true/false/數(shù)組
• 橫向標(biāo)題
  colHeaders:true/false/數(shù)組

單元格

• 指定列寬
  colWidths:寬度/數(shù)組
• 自適應(yīng)列大小
  autoColumnSize：true/false當(dāng)值為true且列寬未設(shè)置時，自適應(yīng)列大小
• 拖拽行頭或列頭改變行或列的大小
  manualColumnResize:true/false當(dāng)值為true時，允許拖動，當(dāng)為false時禁止拖動
  manualRowResize:true/false當(dāng)值為true時，允許拖動，當(dāng)為false時禁止拖動
• 延伸列的寬度
  stretchH：last/all/none last:延伸最后一列,all:延伸所有列,none默認(rèn)不延伸
• 指定單元格的某些屬性 cell
  cell: [ {row:0, col:0, className: 'htRight htMiddle', editor: false}, // 右對齊垂直居中，只讀 {row:1, col:1, className: 'htLeft'} // 左對齊 ]
• 單元格合并
  mergeCells: [{row: 起始行數(shù), col: 起始列數(shù), rowspan: 合并行數(shù), colspan:合并列數(shù) },...]
• 自動換行
  wordWrap：true（默認(rèn)）
• 自定義邊框
  customBorders:[{range:{from:{row:行數(shù),col:列數(shù)},to:{row:行數(shù),col:列數(shù)},上下左右設(shè)置}]

表格操作

• 拖動行或列到指定位置
  manualColumnMove：true/false 當(dāng)值為true時，列可拖拽移動到指定列
  manualRowMove:true/false 當(dāng)值為true時，行可拖拽至指定行
• 允許排序
  columnSorting：true/false當(dāng)值為true時，表示啟用排序插件
• 右鍵菜單展示
  contextMenu：true/false/自定義數(shù)組 當(dāng)值為true時，啟用右鍵菜單，為false時禁用
• 允許鍵盤復(fù)制
  copyable:true
• 允許拖動復(fù)制
  fillHandle:true 也可以控制方向：fillHandle: 'vertical'

四、常用方法

• 添加列
  createCol(index,amount,createAutomatically) index：列索引，amount：添加的列總數(shù)，createAutomatically：為一個數(shù)字
• 設(shè)置單個單元格的值
  set(row,prop,value,source)row:行索引，prop：列索引，value：新值，source：hook插件的提供者
• 獲取數(shù)據(jù)
  getData()
• 加載數(shù)據(jù)
  loadData(data)
• 清空數(shù)據(jù)
  clear()
• 添加或移除列數(shù)據(jù)
  spliceCol(col,index,amount)col:列索引，index：開始改變的數(shù)組索引，amount：改變數(shù)據(jù)的個數(shù)
• 添加或刪除行數(shù)據(jù)
  spliceRow(row,index,amount)row:行索引，index：開始改變的數(shù)組索引，amount：改變數(shù)據(jù)的個數(shù)

總結(jié)

關(guān)于Handsontable的詳細(xì)使用大家可以參考官方API文檔，這里只說一些常用的操作，希望這篇文章對你有所幫助。