What events does SpreadJS support in Angular2?

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 previous article, we learned that SpreadJS supports binding properties in Angular2 , and today we will introduce what events SpreadJS supports in Angular2.

First of all, the way to bind events in Angular2 is to use "( )" in the template to set the binding event, and then write the event triggering method in the export module, like this:

@Component({
    selector: 'my-app',
    template:
      `<gc-spread-sheets (workbookInitialized)=
    "workbookInit($event)" >
    </gc-spread-sheets>`,
})

export class AppComponent { 
    workbookInit (args) {
        //do something
    }
}

Where $event is the keyword of Angular2, similar to window.event, SpreadJS has made some extensions to $event. If you need to deal with SpreadJS in the event, you can pass in $event to get the default parameters triggered by the event, for example :

After the $event parameter is passed in the workbookInitialized event, the instance object of spread can be obtained through args.spread. Here is a description of the workbookInitialized event. In workbookInitialized, the spread object can be obtained through args.spread. In theory, we can do any SpreadJS function here through the spread object. The things here are not handled by Angular2. Here you can do some SpreadJS functions that do not support binding in Angular2, for example:

There is no filtering function in the SpreadJS properties supported by Angular2, so what should we do if we want to implement a column filtering function in the Angular2 project? Taking the above code as an example, we can use in the workbookInit method:

var spread = args.spread;
var sheet = spread.getActiveSheet();
var columncount = sheet.getColumnCount();
var range = new GC.Spread.Sheets.Range(-1, 0, -1, columncount );
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
sheet.rowFilter(rowFilter);

This completes the function of adding bindings to the column.

For detailed event descriptions, please refer to the blog .

It should be noted that all events are bound to the gc-spread-sheets tag, and binding to other tags is invalid.

The above is the whole content of how to build a SpreadJS project with Angular2. I believe that you can easily use SpreadJS in Angular2 projects after referring to the basic construction of the first article, and then referring to the properties of the second pass and the event document of the third article. .

SpreadJS V10.2 version will be released soon, more and better functions are in the new version, so stay tuned!

What events does SpreadJS support in Angular2?

Guess you like