Handsontable Action on a cell

1. Automatically populate cell data

Fillhandle:true/false//When value is true, allows dragging the lower-right corner of the cell to automatically populate the selected cell with its values

2. Merging cells

Mergecells:[{row: Starting number of rows, cols: Number of starting columns, rowspan: Number of rows merged, colspan: Number of columns merged},...]

3. Initialize the alignment of cells or columns

Horizontal style: Htleft,htcenter,htright,htjustify

Vertical style: Httop,htmiddle,htbottom

4. read-only mode

Column read-only, setting column properties: Readonly:true

Cell Read Only: Cellproperties.readonly = True

5. Set the editing type of the cell

Columns:[{type: Type}]

The main types are:

Text: string

Numeric: Number Type

Date: Day box

CheckBox: Radio Box

Password: Password box

The following types of use are more special

Select: Drop-down editor

columns:[

{editor: ' SELECT ',

selectoption:[option 1, option 2, ...]},

.......

]

Dropdown: drop-down selection

columns:[

{type: ' dropdown ',

source:[option 1, option 2, ...]},

......

]

AutoComplete: auto-match mode

columns:[

{type: 'AutoComplete ',

source:[option 1, option 2, ...],

Strict:true/false,//value true, exact match

Allowinvalid:true/false//value is true, the input value is allowed as a match and can only be used when strict is true

},

......

]

Handsontable: Tabular mode

columns:[

{type: 'handsontable ',

handsontable:{...},

......

]

Custom mode

data=[{

Title:html label,

Description: Description,

Comments: Reviews,

Cover: Cover

},

......

]

Custom boundaries

customborders:[

range:{

Form:{row: Number of rows, col: number of columns},//Start column

To:{row: Number of rows, col: number of columns},//Terminating column

top/bottom/right/left:{//up/down right left line

Width: number of images,

Color: Colors

}

}

]

6. Query the value of the cell

Querying a cell's value requires 3 steps:

A. Setting the Hot property search to True

B. Creating a comparison function

C. Rendering comparison results

The sample code is as follows:

[JavaScript]View Plaincopyprint?

2. Var
4. data = [
6. [' Nissan ', ', ' black ', ' black '],
8. [' Nissan ', ', ' Blue ', ' Blue '],
10. [' Chrysler ', ' yellow ', ' Black '],
12. [' Volvo ', ' Yellow ', ' Gray ']
14. ],
16. Example = document.getElementById (' example1 '),
18. searchfiled = document.getElementById (' Search_field '),
20. Hot
24. Hot = New Handsontable (example, {
26. Data:data,
28. Colheaders: True,
30. Search: True
32. });
36. function Onlyexactmatch (querystr, value) {
38. return querystr.tostring () = = = Value.tostring ();
40. }
44. Handsontable.Dom.addEvent (searchfiled, ' keyup ', function (event) {
46. var queryresult = hot.search.query (this.value);
50. Console.log (QueryResult);
52. Hot.render ();
54. });

7. Comments

Comments:true/false//value is true when comments can be displayed, and the right-click menu can be added to delete comments.

When the value is true, you can set the cell's comment content in the following format:

cell:[

{

Row: Number of rows,

Col: Number of columns,

Comment: Comment content

}

]

Handsontable Action on a cell