hansontable簡介
hansontable是一個在線類似Excel的表格編輯器,支持豐富的展現和交互,有多樣的單元格類型供配置。
核心是由原生JavaScript構建,充分模塊化,支持自定義build。
除了核心表格渲染(實質就是js操作table,計算元素位置,自定義綁定事件處理),大部分功能以插件提供。可以靈活構建插拔,自定義添加新功能插件。
github:https://github.com/handsontable/handsontable
- 特性
hansontable free版本提供的重要特性有：單元格下拉自動補全、注釋信息、右鍵菜單、復制粘貼、數據校驗、合並單元格等等。
1.固定行列位置
fixedRowsTop:行數 //固定頂部多少行不能垂直滾動
fixedColumnsLeft:列數 //固定左側多少列不能水平滾動
2.拖拽行頭或列頭改變行或列的大小
manualColumnResize:true/false//當值為true時，允許拖動，當為false時禁止拖動
manualRowResize:true/false//當值為true時，允許拖動，當為false時禁止拖動
3.顯示行頭列頭
colHeaders:true/fals/數組 //當值為true時顯示列頭，當值為數組時，列頭為數組的值
rowHeaders：true/false/數組 //當值為true時顯示行頭，當值為數組時，行頭為數組的值
4.右鍵菜單展示
contextMenu：true/false/自定義數組 //當值為true時，啟用右鍵菜單，為false時禁用
5.自適應列大小
autoColumnSize：true/false //當值為true且列寬未設置時，自適應列大小
6.minCols：最小列數
minRows：最小行數
minSpareCols：最小列空間，不足則添加空列
maxCols：最大列數
maxRows：最大行數
minSpareRows：最小行空間，不足則添加空行
固定行列位置
fixedRowsTop:行數 //固定頂部多少行不能垂直滾動
fixedColumnsLeft:列數 //固定左側多少列不能水平滾動
7.允許排序
columnSorting：true/false/對象 //當值為true時，表示啟用排序插件
hot.updateSettings({
columnSorting:false
});
排序的使用也可已直接調用sort()方法實現。如下操作：
if(hot.sortingEnabled){
hot.sort(行數，true/false); //true為升序，false為降序
}
8.延伸列的寬度
stretchH：last/all/none //last:延伸最后一列,all:延伸所有列,none默認不延伸。
9.手動固定某一列
manualColumnFreeze: true/false
//當值為true時，選中某一列，右鍵菜單會出現freeze this column選項，該選項的作用是固定這一列不可水平滾動，並會將這一列移動到非固定列的前面。再次右鍵菜單會出現unfreeze this column，意思是取消該列的固定，並將其還原到初始位置。
10.設置當前行或列的樣式
currentRowClassName：當前行樣式的名稱
currentColClassName：當前列樣式的名稱
11.行分組或列分組
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
上面的例子介紹了4個分組，第0-2列為一組，第3-5列為第二組，第0-4行為一組，第5-7列為第二組。分組可在行頭或列頭看見，分組可被展開或隱藏。
12.自適應列大小
autoColumnSize：true/false //當值為true且列寬未設置時，自適應列大小
colWidths:[列寬1，列寬2，...]/列寬值
13.observeChanges：true/false //當值為true時，啟用observeChanges插件
14.自定義邊框設置，可以進行初始化配置，如下：
customBorders:[{range:{from:{row:行數,col:列數},to:{row:行數,col:列數},上下左右設置}]
15.單元格合並可以進行初始化配置
mergeCells: [{row: 起始行數, col: 起始列數, rowspan: 合並行數, colspan:合並列數 },...]，也可以先聲明單元格允許合並，mergeCells:true，再利用合並方法操作。
16.data
(1)數組
data:[
["2015", "鄂Q2DY79", 50, 30, 4],
["2016", "冀D98998", 45, 56, 3],
["2017", "豫J63569", 30, 34, 3],
["2018", "京AF2336", 28, 32, 3],
["2019", "京AF2332", 60, 12, 2],
["2020", "渝A00001", 36, 13, 1],
["2021", "渝A00002", 33, 34, 1],
["2022", "渝A00003", 30, 23, 3],
["2023", "渝A00004", 45, 12, 4],
["2024", "渝A00005", 70, 22,6],
(2)對象
objectData:[
{year:"2015", car_no:"鄂Q2DY79", detail:50, "money":30, "judge":4},
{year:"2016", car_no:"冀D98998", detail:45, "money":56, "judge":3},
{year:"2017", car_no:"豫J63569", detail:30, "money":34, "judge":3},
{year:"2018", car_no:"京AF2336", detail:28, "money":32, "judge":3},
{year:"2019", car_no:"京AF2332", detail:60, "money":12, "judge":2},
{year:"2020", car_no:"渝A00001", detail:36, "money":13, "judge":1},
{year:"2021", car_no:"渝A00002", detail:33, "money":34, "judge":1},
{year:"2022", car_no:"渝A00003", detail:30, "money":23, "judge":3},
{year:"2023", car_no:"渝A00004", detail:45, "money":12, "judge":4},
{year:"2024", car_no:"渝A00005", detail:70, "money":22, "judge":6}
]
(3)column
columns: function(column) {
var columnMeta = {};
if (column === 0) {
columnMeta.data = 'id';
} else if (column === 1) {
columnMeta.data = 'name.first';
} else if (column === 2) {
columnMeta.data = 'name.last';
} else if (column === 3) {
columnMeta.data = 'address';
} else {
columnMeta = null;
}
return columnMeta;
},
方法
1.為handsontable添加鈎子方法
addHook(key,callback):key為鈎子方法名
addHookOnce(key,callback)：添加只使用一次的方法，用完后自動刪除
2.添加行或列，刪除行或列
alter(action,index,amount,source,keepEmptyRows)
action:有4個值insert_row，insert_col，remove_row，remove_col
index：行索引，當存在時在索引處插入或刪除，不存在時在當前行后插入
amount：默認值為1
source：行或列對象
keepEmptyRows：true/false，當值為true時，空行不被刪除。
3.clear():清空表格數據
4.colOffset():獲取可見的第一列的索引值
5.colToProp(col):返回給定索引列的列名，col為列索引
6.countCols():統計表格的所有列總數並返回
countRows():統計表格的總行數，並返回
7.countEmptyCols(ending)：當ending的值為true時，統計所有空列的總數，返回總數顯示再最右側
countEmptyRows(ending):當ending的值為1時，統計所有空行總數，返回總數顯示在最下方
8.countRenderedCols():統計並返回被渲染的列數
countRenderedRows():統計並返回被渲染的行數
9.countVisibleCols():統計並返回可見的列數，當返回-1時，表格不可見
countVisibleRows():統計並返回可見的行數，當返回-1時，表格不可見
10.deselectCell():取消當前被選中的單元格
11.destory():移除dom對象中的表格
12.destoryEditor(reverOriginal)
去除當前編輯器，並選中當前單元格，渲染上該效果。如果reverOriginal不是true則被編輯的數據將被保存，如果為true，則會恢復之前的數據，不保存新的數據到單元格。
13.getActiveEditor():返回一個活躍的編輯對象。
14.getCell(row.col,topmost):根據行列索引，獲取一個被渲染的單元格，如果該單元格未被渲染則返回null
其中，row,col分別為行索引和列索引，topmost為表示是否是最上層，其值為true/false
15.getCellEditor():獲取單元格的編輯器
16.getCellMeta(row,col):根據行列索引獲取單元格的屬性對象
17.getCellRenderer(row,col)：根據單元格的行列索引獲取單元格的渲染函數
18.getCellValidator()：獲取單元格的校驗器
19.getColHeader(col):根據列索引獲取列頭名稱
getRowHeader(row):根據行索引獲取行頭名稱
20.getColWidth(col):根據列索引獲取列寬
getRowHeight(row):根據行索引獲取行高
21.getCoords(elem):獲取元素的坐標
22.getCopyableData(startRow,startCol,endRow,endCol):獲取指定范圍的單元格數據
23.getData(row1,col1,row2,col2):獲取指定范圍的單元格的數據
24.getDataAtCell(row,col):根據行列索引獲取單元格的值
25.getDataAtCol(col)：根據列索引獲取一列的數據
getDataAtRow(row)：根據行索引獲取一行的數據
26.getDataAtProp(prop):根據對象屬性名獲取相應的列的數據,prop為屬性名
27.getDataAtRowProp(row,prop):根據行索引返回指定屬性名的值
28.getInstance():獲取一個handsontable實例
29.getPlugin(pluginName):根據插件名稱獲取一個插件實例
30.getSelected():獲取被選中的單元格的索引數組，數組包括：startRow，stratCol，endRow，endCol4個值。
31.getSelectedRange():獲取被選中的單元格的坐標
32.getSettings():獲取對象的配置信息
33.getSourceDataAtCol(col):根據列號獲取data source中的該列數據
getSourceDataAtRow(row):根據行號獲取data source中的該行數據
34.getValue():獲取所有被選中的單元格的值
35.hasColHeaders():返回是否存在列頭
hasRowHeaders():返回是否存在行頭
36.isEmptyCol(col):根據列索引判斷該列是否為空
isEmptyRow(row):根據行索引判斷該行是否為空
37.isListening():判斷當前handsontable實例是否被監聽
listen():監聽body中的input框
unlisten():停止監聽
38.loadData(data)：加載本地數據
39.populateFormArray(start,input,end,source,method,direction,deltas):使用二維數組填充單元格
其中，start:開始位置
input：二維數組
end：結束位置
source：默認為populateFromArray
method：默認為overwrite
direction：left/right/top/bottom
deltas:其值為一個數組
populateFormArray(row,col,input,endRow,,endCol,source,method,direction,deltas)
40.propToCol(prop):返回給定屬性名的列索引，prop為屬性名
propToRow(prop):返回給定屬性名的行索引，prop為屬性名
41.removeCellMeta(row,col,key):根據行列索引移除指定的屬性對象
42.removeHook(key,callback):移除鈎子方法
43.render():渲染表格
44.rowOffset():獲取第一個可見行的索引
45.setCellMeta(row,col,key,val)：設置參數屬性和值到指定行列的單元格
46.setCellMetaObject(row,col,prop):設置屬性對象到指定的單元格
47.setDataAtCell(row,col,value,source)：設置新值到一個單元格
48.setDataAtRowProp(row,prop,value,source):設置指定行的屬性值為指定的值
49.updateSettings(setting,init)：修改初始化的配置信息
50.validdateCells(callback):使用驗證器驗證所有單元格