handsontable常規配置的中文API


常規配置:

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,...]/列寬值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM