常規配置:
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時顯示列頭,當值為數組時,列頭為數組的值
rowHeaders:true/false/數組 //當值為true時顯示行頭,當值為數組時,行頭為數組的值
10.數據顯示
data:[[第一行數據],[第二行數據],...[第n行數據]]/對象數組
獲取數據的方法:hot.getData()。
加載數據的方法:hot.loadData(data)。
當不需要顯示某一列的時候可用如下格式設置:
columns:[
{data:0},
{data:2}
]
這里就不顯示第二列數據,只有第1、3列數據
11.右鍵菜單展示
contextMenu:true/false/自定義數組 //當值為true時,啟用右鍵菜單,為false時禁用
12.自適應列大小
autoColumnSize:true/false //當值為true且列寬未設置時,自適應列大小
13.minCols:最小列數
minRows:最小行數
minSpareCols:最小列空間,不足則添加空列
maxCols:最大列數
maxRows:最大行數
minSpareRows:最小行空間,不足則添加空行
14.observeChanges:true/false //當值為true時,啟用observeChanges插件
15.colWidths:[列寬1,列寬2,...]/列寬值