[Go to]handsontable general configuration of the Chinese API

Source: Internet
Author: User

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?
  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) {//cell render
  12. this.renderer = myrenderer;
  13. },
  14. MergeCells: True
  15. });


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?
  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: {//Multiple cells
  10. From: {//start position
  11. Row:1,
  12. Col:1
  13. },
  14. To: {
  15. Row:3,
  16. Col:4
  17. }
  18. },
  19. Top: {//End position
  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. {//single cell
  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. });


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?
  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,

Custom Merge:

[JavaScript]View Plaincopy print?
  1. if (key = = "Merge") {
  2. if (hot.mergeCells.mergedCellInfoCollection.length > 0) {
  3. For (var k=0; 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. }

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.