[轉]handsontable常規配置的中文API

標籤：data   還原   board   分組   右鍵菜單   不能   load   後退   order   

原文地址:http://blog.csdn.net/mafan121/article/details/46050049

常規配置：

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

例如：

 

[javascript] view plain copy print?

1. var hot = new Handsontable(container, {  
2.     data: data,  
3.     observeChanges: true,  
4.     colHeaders: true,  
5.     rowHeaders: true,  
6.     colWidths: 70,  
7.     contextMenu: false,  
8.     manualRowResize: true,  
9.     manualColumnResize: true,  
10.     minSpareRows: 30,  
11.     cells: function(row, col, prop) {//儲存格渲染  
12.             this.renderer = myRenderer;  
13.     },  
14.     mergeCells: true  
15. });  

16.自訂邊框設定，可以進行初始化配置，如下：

customBorders:[{range:{from:{row:行數,col:列數},to:{row:行數,col:列數},上下左右設定}]

 

[javascript] view plain copy print?

1. hot = Handsontable(container, {  
2.     data: Handsontable.helper.createSpreadsheetData(200, 20),  
3.     rowHeaders: true,  
4.     fixedColumnsLeft: 2,  
5.     fixedRowsTop: 2,  
6.     colHeaders: true,  
7.     customBorders: [  
8.       {  
9.         range: {//多個儲存格  
10.           from: {//起始位置  
11.             row: 1,  
12.             col: 1  
13.           },  
14.           to: {  
15.             row: 3,  
16.             col: 4  
17.           }  
18.         },  
19.         top: {//結束位置  
20.           width: 2,  
21.           color: ‘#5292F7‘  
22.         },  
23.         left: {  
24.           width: 2,  
25.           color: ‘orange‘  
26.         },  
27.         bottom: {  
28.           width: 2,  
29.           color: ‘red‘  
30.         },  
31.         right: {  
32.           width: 2,  
33.           color: ‘magenta‘  
34.         }  
35.       },  
36.       {//單一儲存格  
37.         row: 2,  
38.         col: 2,  
39.         left: {  
40.           width: 2,  
41.           color: ‘red‘  
42.         },  
43.         right: {  
44.           width: 1,  
45.           color: ‘green‘  
46.         }  
47.       }]  
48.   });  

也可以聲明customBorder:true，表示允許自訂儲存格邊框。

17.儲存格合并可以進行初始化配置，如下：

mergeCells: [{row: 起始行數, col: 起始列數, rowspan: 合并行數, colspan:合并列數 },...]，

也可以先聲明儲存格允許合并，mergeCells:true，再利用合并方法操作。

[javascript] view plain copy print?

1. hot = new Handsontable(container, {  
2.     data: data,  
3.     observeChanges: true,  
4.     colHeaders: true,  
5.     rowHeaders: true,  
6.     colWidths: 70,  
7.     contextMenu: false,  
8.     manualRowResize: true,  
9.     manualColumnResize: true,  
10. //  minSpareRows: 30,  
11.    cells: function(row, col, prop) {  
12.          this.renderer = myRenderer;       
13.    },  
14.     mergeCells: true,  

自訂合并：

[javascript] view plain copy print?

1. if(key == "merge") {  
2.     if(hot.mergeCells.mergedCellInfoCollection.length > 0) {  
3.         for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {  
4.             if(hot.mergeCells.mergedCellInfoCollection[k].row == row &&  
5.                  hot.mergeCells.mergedCellInfoCollection[k].col == col) {  
6.                     hot.mergeCells.mergedCellInfoCollection.splice(k,1);  
7.                     return;  
8.             }else{  
9.                 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col,   
10.                     "rowspan": rowspan, "colspan": colspan});  
11.                     break;  
12.             }  
13.         }  
14.     } else {  
15.         hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan});  
16.     }  

注意：hansontable將合并的儲存格單獨拿出來放到了mergeCells數組的mergedCellInfoCollection集合中，所以對合并的操作也是增刪集合中的對象。並重新渲染。

[轉]handsontable常規配置的中文API