- 常規屬性：
1.固定行列位置
fixedRowsTop:行數 //固定頂部多少行不能垂直滾動
fixedColumnsLeft:列數 //固定左側多少列不能水平滾動
2.拖拽行頭或列頭改變行或列的大小
manualColumnResize:true/false//當值為true時，允許拖動，當為false時禁止拖動
manualRowResize:true/false//當值為true時，允許拖動，當為false時禁止拖動
3.延伸列的寬度
stretchH：last/all/none //last:延伸最后一列,all:延伸所有列,none默認不延伸。
4.手動固定某一列
manualColumnFreeze: true/false
//當值為true時，選中某 一列，右鍵菜單會出現freeze this column選項，該選項的作用是固定這一列不可水平滾動，並會將這一列移動到非固定列的前面。再次右鍵菜單會出現unfreeze this column，意思是取消該列的固定，並將其還原到初始位置。
5.拖動行或列到某一行或列之后
manualColumnMove：true/false 當值為true時，列可拖拽移動到指定列
manualRowMove:true/false 當值為true時，行可拖拽至指定行
當屬性的值為true時，行頭或列頭可以被拖拽移動，移動后該行或列將會被移動到指定位置，原先該行或列的后面部分自動上移或后退。移動的時候鼠標需選中行線或列線才行。
6.設置當前行或列的樣式
currentRowClassName：當前行樣式的名稱
currentColClassName：當前列樣式的名稱
7.行分組或列分組
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
上面的例子介紹了4個分組，第0-2列為一組，第3-5列為第二組，第0-4行為一組，第5-7列為第二組。分組可在行頭或列頭看見，分組可被展開或隱藏。
8.允許排序
columnSorting：true/false/對象 //當值為true時，表示啟用排序插件
當值為true時，排序插件的使用可通過點擊列頭文字實現。當值為false時表示禁用排序。當值為對象時，該對象包含兩個屬性：column：列數。sortOrder：true/false，升序或降序，true為升序排列。當用對象啟動插件后可用如下方式禁用插件：
hot.updateSettings({
columnSorting:false
});
排序的使用也可已直接調用sort()方法實現。如下操作：
if(hot.sortingEnabled){
hot.sort(行數，true/false); //true為升序，false為降序
}
9.顯示行頭列頭
colHeaders:true/fals/數組 //當值為true時顯示列頭，當值為數組時，列頭為數組的值
例如：colHeaders: ['日期', '地點', '商品', '單價', '銷量']
rowHeaders：true/false/數組 //當值為true時顯示行頭，當值為數組時，行頭為數組的值
例如：rowHeaders: [1, 2, 3, 4, 5, 6]
10.表格數據
data：[[第一行數據],[第二行數據],...[第n行數據]]/對象數組
獲取數據的方法：hot.getData()。
加載數據的方法：hot.loadData(data)。
當不需要顯示某一列的時候可用如下格式設置：
columns：[
{data:0},
{data:2}
]
這里就不顯示第二列數據，只有第1、3列數據
data可以有兩種格式。
第一種是二維數組：
data: [
['日期','銷售地點','銷售商品','單價','銷量'], ['2017-01', '北京', '冰箱', '3399', 530], ['2017-01', '天津', '空調', '4299', 522], ['2017-01', '上海', '洗衣機', '1299', 544], ['2017-01', '廣州', '彩電', '4599', 562], ['2017-01', '深圳', '熱水器', '1099', 430], ['2017-02', '重慶', '筆記本電腦', '4999', 666], ['2017-02', '廈門', '油煙機', '2899', 438], ['2017-02', '青島', '飲水機', '899', 620], ['2017-02', '大連', '手機', '1999', 500] ];第二種是對象數組：如果使用該方式渲染數據，則不能使用插入列方法：insert_col和remove_col
data: [ {'date': '2017-01', 'place':'北京', 'goods':'冰箱', 'price':3399, '銷量':530}, {'date': '2017-01', 'place':'天津', 'goods':'空調', 'price':4299, '銷量':522}, {'date': '2017-01', 'place':'上海', 'goods':'洗衣機', 'price':1299, '銷量':544}, {'date': '2017-01', 'place':'廣州', 'goods':'彩電', 'price':4599, '銷量':562}, {'date': '2017-01', 'place':'深圳', 'goods':'熱水器', 'price':1099, '銷量':430}, {'date': '2017-02', 'place':'重慶', 'goods':'筆記本電腦', 'price':4999, '銷量':666}, {'date': '2017-02', 'place':'廈門', 'goods':'油煙機', 'price':2899, '銷量':438}, {'date': '2017-02', 'place':'青島', 'goods':'飲水機', 'price':1099, '銷量':620}, {'date': '2017-02', 'place':'大連', 'goods':'手機', 'price':1999, '銷量':500} ]
11.右鍵菜單展示
contextMenu：true/false/自定義數組 //當值為true時，啟用右鍵菜單，為false時禁用
例如：contextMenu: ["row_above", "row_below", "col_left", "col_right", "remove_row", "remove_col", "---------", "undo", "redo", "Read Only", "alignment", "Merge Cells"]
12.自適應列大小
autoColumnSize：true/false //當值為true且列寬未設置時，自適應列大小
13.minCols：最小列數
minRows：最小行數
minSpareCols：最小列空間，不足則添加空列
maxCols：最大列數
maxRows：最大行數
minSpareRows：最小行空間，不足則添加空行
14.observeChanges：true/false //當值為true時，啟用observeChanges插件
15.colWidths:[列寬1，列寬2，...]/列寬值
例如：
var hot = new Handsontable(container, {
data: data,
observeChanges: true,
colHeaders: true,
rowHeaders: true,
colWidths: 70, //colWidths: [100, 200, 300, 200, 100]
contextMenu: false,
manualRowResize: true,
manualColumnResize: true,
minSpareRows: 30,
cells: function(row, col, prop) {//單元格渲染
this.renderer = myRenderer;
},
mergeCells: true
});
16.自定義邊框設置，可以進行初始化配置，如下：
customBorders:[{range:{from:{row:行數,col:列數},to:{row:行數,col:列數},上下左右設置}]
hot = Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(200, 20),
rowHeaders: true,
fixedColumnsLeft: 2,
fixedRowsTop: 2,
colHeaders: true,
customBorders: [
{
range: {//多個單元格
from: {//起始位置
row: 1,
col: 1
},
to: {
row: 3,
col: 4
}
},
top: {//結束位置
width: 2,
color: '#5292F7'
},
left: {
width: 2,
color: 'orange'
},
bottom: {
width: 2,
color: 'red'
},
right: {
width: 2,
color: 'magenta'
}
},
{//單一單元格
row: 2,
col: 2,
left: {
width: 2,
color: 'red'
},
right: {
width: 1,
color: 'green'
}
}]
});
也可以聲明customBorder:true，表示允許自定義單元格邊框。
用range指定一個范圍，或者直接使用row、col指定單元格位置，用top、right、bottom、left分別設置單元格上下左右邊框的屬性。
customBorders: [
{
range: {
from: {row: 1, col:1},
to: {row: 3, col:3}
},
top: {width: 2, color: '#25e825'},
right: {width: 2, color: '#25e825'},
bottom: {width: 2, color: '#25e825'},
left: {width: 2, color: '#25e825'}
},
{
row: 2,
col: 2,
top: {width: 2, color: '#7687c5'},
right: {width: 2, color: '#7687c5'},
bottom: {width: 2, color: '#7687c5'},
left: {width: 2, color: '#7687c5'}
}
]
17.單元格合並可以進行初始化配置，如下：
mergeCells: [{row: 起始行數, col: 起始列數, rowspan: 合並行數, colspan:合並列數 },...]，
例如：
mergeCells: [
{row:0, col:0, rowspan:5, colspan:1},
{row:5, col:0, rowspan:4, colspan:1}
]
也可以先聲明單元格允許合並，mergeCells:true，再利用合並方法操作。
hot = new Handsontable(container, {
data: data,
observeChanges: true,
colHeaders: true,
rowHeaders: true,
colWidths: 70,
contextMenu: false,
manualRowResize: true,
manualColumnResize: true,
// minSpareRows: 30,
cells: function(row, col, prop) {
this.renderer = myRenderer;
},
mergeCells: true,
18 className：容器單元格的class屬性（htCenter，htLeft，htRight，htJustify，htTop，htMiddle，htBottom），默認值undefined，這些屬性將作為容器單元格內容的對齊方式
19 cell：指定單元格的某些屬性（數組），如下：
cell: [ {row:0, col:0, className: 'htRight htMiddle', editor: false}, // 右對齊垂直居中，只讀 {row:1, col:1, className: 'htLeft'} // 左對齊 ]
20 startRows：初始行數
21 startCols：初始列數
22 wordWrap：自動換行
默認true
23 copyable：是否允許鍵盤復制
默認true，如下面的官網說明，這個只適用於鍵盤上CTRL + C的復制，不適用於拖動復制。
Make cell copyable (pressing CTRL + C on your keyboard moves its value to system clipboard).
Note: this setting is false by default for cells with type password.
24 fillHandle：是否允許拖動復制
默認true，也可以控制方向：fillHandle: 'vertical'
如果設置為false，則選中單元格后，在右下方不會出現可以拖動的點。
25 renderAllRows：是否呈現所有行
如果鍵入true，將禁用handsontable的虛擬呈現機制。
也就是說如果鍵入true，則當你用鍵盤上下移動數據時，handsontable中的數據不會隨着焦點的下移或上移同步移動；
如果是false，則當你用鍵盤上下移動數據時，滾動條也會隨着焦點上下移動。
By QJL