導(dǎo)語：
最近在做一個(gè)關(guān)于報(bào)表管理的項(xiàng)目，發(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
下載下來本地引入也可以
二、初始化
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é)果
一個(gè)簡單的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è)置時(shí)蜡饵，自適應(yīng)列大小 - 拖拽行頭或列頭改變行或列的大小
manualColumnResize:true/false當(dāng)值為true時(shí)，允許拖動胳施，當(dāng)為false時(shí)禁止拖動
manualRowResize:true/false當(dāng)值為true時(shí)溯祸，允許拖動，當(dāng)為false時(shí)禁止拖動 - 延伸列的寬度
stretchH：last/all/nonelast:延伸最后一列,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時(shí)焦辅，列可拖拽移動到指定列
manualRowMove:true/false當(dāng)值為true時(shí)，行可拖拽至指定行 - 允許排序
columnSorting：true/false當(dāng)值為true時(shí)椿胯，表示啟用排序插件 - 右鍵菜單展示
contextMenu：true/false/自定義數(shù)組當(dāng)值為true時(shí)筷登，啟用右鍵菜單，為false時(shí)禁用 - 允許鍵盤復(fù)制
copyable:true - 允許拖動復(fù)制
fillHandle:true也可以控制方向：fillHandle: 'vertical'
四哩盲、常用方法
- 添加列
createCol(index,amount,createAutomatically)index：列索引前方，amount：添加的列總數(shù)狈醉，createAutomatically：為一個(gè)數(shù)字 - 設(shè)置單個(gè)單元格的值
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ù)的個(gè)數(shù) - 添加或刪除行數(shù)據(jù)
spliceRow(row,index,amount)row:行索引金吗，index：開始改變的數(shù)組索引，amount：改變數(shù)據(jù)的個(gè)數(shù)
總結(jié)
關(guān)于Handsontable的詳細(xì)使用大家可以參考官方API文檔趣竣，這里只說一些常用的操作摇庙，希望這篇文章對你有所幫助。
