Handsontable-一款仿 Excel效果的表格插件使用總結 96

最近在做一個關於報表管理的項目，發現了一款很好用的jQuery插件- Handsontable。它真的特別給力，在 Excel 中可進行的操作，你幾乎都可以在網頁中做到，如拖動復制、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,
});

結果

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

三、基本屬性配置

---

標題

• 縱向標題
  rowHeaders:true/false/數組
• 橫向標題
  colHeaders:true/false/數組

單元格

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

表格操作

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

四、常用方法

---

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

總結

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