[Go to]handsontable general configuration of the Chinese API

Original address: http://blog.csdn.net/mafan121/article/details/46050049

General configuration:

1. Fixed row and column position

Fixedrowstop: Number of rows//fixed top How many rows cannot be scrolled vertically

Fixedcolumnsleft: Number of columns//fixed left how many columns cannot be scrolled horizontally

2. Drag the Wardrobe or column header to change the size of the row or column

manualcolumnresize:true/false//when the value is true, drag is allowed when false, and drag is disabled when

manualrowresize:true/false//when the value is true, drag is allowed when false, and drag is disabled when

3. Width of the extension column

Stretchh:last/all/none//last: Extends the last column, all: Extends all columns, none defaults to not extend.

4. Manually fix a column

Manualcolumnfreeze:true/false

When the value is true, a column is selected, and the Freeze this column option appears on the right-click menu, which is fixed to not scroll horizontally and will move the column to the front of the non-fixed column. The unfreeze This column appears again in the right-click menu, which means that the columns are fixed and restored to their original positions.

5. After you drag a row or column to a row or column

Manualcolumnmove:true/false column can be dragged and moved to the specified column when the value is True

Manualrowmove:true/false when the value is true, the row can be dragged to the specified row

When the value of the property is true, the head of the wardrobe or column can be dragged and moved, and the row or column will be moved to the specified position, and the previous part of the row or column is automatically moved up or backward. When moving, the mouse should select a line or a column line.

6. Set the style of the current row or column

Currentrowclassname: Name of the current line style

Currentcolclassname: Name of the current column style

7. Row grouping or column grouping

groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]

The above example describes 4 groupings, 第0-2 listed as a group, 第3-5 listed as the second group, 第0-4 behavior a group, 第5-7 as the second group. A group can be seen in a row header or column header, and groupings can be expanded or hidden.

8. Allow sorting

columnsorting:true/false/object//value is true when the sort plug-in is enabled

When the value is true, the use of the sort plug-in can be achieved by clicking on the column header text. A value of false indicates that sorting is disabled. When the value is an object, the object contains two properties: column: The number of columns. Sortorder:true/false, ascending or descending, true for ascending order. When you start a plug-in with an object, you can disable the plugin as follows:

Hot.updatesettings ({

Columnsorting:false

});

The use of sorting can also be implemented directly by calling the sort () method. Do the following:

if (hot.sortingenabled) {

Hot.sort (number of rows, true/false); True to ascending, false to descending

}

9. Display the head of the Wardrobe

colheaders:true/fals/array//value is true when column header is displayed, column header is an array

rowheaders:true/false/array//value is true when the wardrobe is displayed, the values for the array are

10. Data display

data:[[first row of data],[second row of data],... [Nth row of data]] /Object Array

method to get Data: Hot.getdata ().

Method of loading data: Hot.loaddata.

The following formatting is available when you do not need to display a column:

columns:[

{data:0},

{Data:2}

]

The second column of data is not shown here, only the 1th, 3 columns of data

11. Right-click menu display

contextmenu:true/false/custom Array//value is true when the right-click menu is enabled, False when disabled

12. Adaptive column Size

Autocolumnsize:true/false//value is true and column width is not set, the adaptive column size

13.minCols: Minimum number of columns

Minrows: Minimum number of rows

Minsparecols: Minimum column space, insufficient add empty column

Maxcols: Maximum number of columns

MaxRows: Maximum number of rows

Minsparerows: Minimum line space, insufficient add blank line

14.observechanges:true/false//When value is true, enable observechanges plug-in

15.colwidths:[column width 1, column width 2, ...] /Column Width value

For example:

[JavaScript]View Plaincopy print?

2. var hot = new Handsontable (container, {
4. Data:data,
6. Observechanges: True,
8. Colheaders: True,
10. Rowheaders: True,
12. Colwidths:70,
14. ContextMenu: false,
16. Manualrowresize: True,
18. Manualcolumnresize: True,
20. Minsparerows:30,
22. Cells: function (row, col, prop) {//cell render
24. this.renderer = myrenderer;
26. },
28. MergeCells: True
30. });

16. Custom border settings, can be initialized configuration, as follows:

Customborders:[{range:{from:{row: Number of rows, col: number of columns},to:{row: Number of rows, col: number of columns}, settings up or down}]

[JavaScript]View Plaincopy print?

2. Hot = handsontable (container, {
4. Data:Handsontable.helper.createSpreadsheetData (200, 20),
6. Rowheaders: True,
8. Fixedcolumnsleft:2,
10. Fixedrowstop:2,
12. Colheaders: True,
14. Customborders: [
16. {
18. Range: {//Multiple cells
20. From: {//start position
22. Row:1,
24. Col:1
26. },
28. To: {
30. Row:3,
32. Col:4
34. }
36. },
38. Top: {//End position
40. Width:2,
42. Color: ' #5292F7 '
44. },
46. Left: {
48. Width:2,
50. Color: ' orange '
52. },
54. Bottom: {
56. Width:2,
58. Color: ' red '
60. },
62. Right: {
64. Width:2,
66. Color: ' Magenta '
68. }
70. },
72. {//single cell
74. Row:2,
76. Col:2,
78. Left: {
80. Width:2,
82. Color: ' red '
84. },
86. Right: {
88. Width:1,
90. Color: ' green '
92. }
94. }]
96. });

You can also declare customborder:true, which means that custom cell borders are allowed.

17. The cell merge can be initialized with the following configuration:

MergeCells: [{row: Starting number of rows, col: Number of starting columns, RowSpan: Number of merged rows, colspan: Number of merged columns },...],

You can also declare cells to allow merging,Mergecells:true, and then take advantage of the merge method operation.

[JavaScript]View Plaincopy print?

2. Hot = new Handsontable (container, {
4. Data:data,
6. Observechanges: True,
8. Colheaders: True,
10. Rowheaders: True,
12. Colwidths:70,
14. ContextMenu: false,
16. Manualrowresize: True,
18. Manualcolumnresize: True,
20. Minsparerows:30,
22. Cells: function (row, col, prop) {
24. this.renderer = myrenderer;
26. },
28. MergeCells: True,

Custom Merge:

[JavaScript]View Plaincopy print?

2. if (key = = "Merge") {
4. if (hot.mergeCells.mergedCellInfoCollection.length > 0) {
6. For (var k=0; k
8. if (Hot.mergecells.mergedcellinfocollection[k].row = = Row &&
10. Hot.mergecells.mergedcellinfocollection[k].col = = col) {
12. Hot.mergeCells.mergedCellInfoCollection.splice (k,1);
14. return;
16. }else{
18. Hot.mergeCells.mergedCellInfoCollection.push ({"row": Row, "col": Col,
20. "rowspan": rowspan, "colspan": colspan});
22. Break ;
24. }
26. }
28. } Else {
30. Hot.mergeCells.mergedCellInfoCollection.push ({"row": Row, "col": Col, "rowspan": rowspan, "colspan":  colspan});
32. }

Note: hansontable merges the merged cells separately and puts them in the Mergedcellinfocollection collection of the MergeCells array, so the merge operation is also added to the objects in the collection. and re-render.

[Go to]handsontable general configuration of the Chinese API