SpreadJS pure front-end table control is an HTML5-based JavaScript spreadsheet and grid function control, providing a complete formula engine, sorting, filtering, input controls, data visualization, Excel import/export and other functions, suitable for .NET, Java and mobile Table program development for online editing of Excel-like functions on various platforms such as the terminal.
In the last article , we learned that SpreadJS already fully supports Angular2, and it only takes 4 steps to integrate SpreadJS in Angular2.
Let's introduce what properties SpreadJS supports binding in Angular2. Different tags can bind different attributes. We will introduce them according to tags. The following is a list of the main attributes, more detailed attribute introduction please click here to view.
gc-spread-sheets：
| Attribute |
Type |
Comment |
| name |
string |
The name of the entire workbook, the default name for Excel when exporting |
| tabStripVisible |
boolean |
Whether to display the navigation bar of the lower left sheet |
| allowUserDragFill |
boolean |
Whether to allow users to drag and drop to fill |
| highlightInvalidData |
boolean |
Whether to highlight invalid data during data validation (after highlighting is set, invalid data will be circled in red) |
| backColor |
string |
set background color |
| backgroundImage |
string |
set background image |
| hostStyle |
any |
The style of the label is equivalent to the style attribute of HTML, and the usage method is equivalent to the style binding of angular2, for example: {width: 400px, height: 600px} |
| hostClass |
string |
The class of the tag, equivalent to the HTML class attribute. |
gc-worksheet：
| Attribute |
type |
Comment |
| dataSource |
any |
Binding at the form level, setting the data source. |
| name |
string |
Set the name of the sheet |
| frozenColumnCount |
number |
Freeze columns at the top, the parameter is colindex |
| frozenRowCount |
number |
Freeze the row at the top, the parameter is rowindex |
| frozenTrailingColumnCount |
number |
Freeze the column at the bottom, the parameter is colcount-colindex, for example, freeze the last two rows, the parameter is 2. |
| frozenTrailingRowCount |
number |
Freeze rows at the bottom, the parameter is rowcount-rowindex |
| rowCount |
number |
Set the number of lines |
| colCount |
number |
Set the number of columns |
| rowHeaderVisible |
boolean |
whether to show rowHeader |
| columnHeaderVisible |
boolean |
whether to display columnHeader |
| isProtected |
boolean |
Set up form protection |
| selectionBackColor |
string |
Set the background color of the selected area |
| selectionBorderColor |
string |
Set the border color of the selected area |
| defaultStyle |
GC.Spread.Sheets.Style |
Set the default style, the parameter is an instance of GC.Spread.Sheets.Style. |
gc-column ：
| Attribute |
type |
Comment |
| width |
number |
column width |
| resizable |
boolean |
Whether to resize by dragging |
| autoFit |
boolean |
Whether to automatically match the column width |
| style |
GC.Spread.Sheets.Style |
Style the entire column |
| cellType |
GC.Spread.Sheets.CellTypes.Base |
Set the cell type for the entire column |
| formatter |
string |
Format cells for an entire column |
The above are the supported properties. It should be noted that the maximum precision of SpreadJS in Angular2 can only be set at the column level, which is related to the binding mechanism of Angular2 and needs special attention.
SpreadJS V10.2 version will be released soon, more and better functions are in the new version, so stay tuned!
Log in to the SpreadJS official website to learn more.