前文我们介绍了spreadjs在Angular2中支持的属性，本文将介绍spreadjs在Angular2中支持的事件。
首先angular2绑定事件的方法是在template中使用"()"设置绑定事件，然后在导出模块中编写事件触发的方法，像这样：
@Component({
selector: 'my-app',
template: `<gc-spread-sheets (workbookInitialized)="workbookInit($event)" >
</gc-spread-sheets>`,
})
export class AppComponent {
workbookInit (args) {
//do something
}
}
其中$event为angular2的关键字，类似于window.event，spreadjs对$event做了一些扩展，如果需要在事件中对spread做相关的处理，那么可以传入$event来获取事件触发的默认参数，例如：
workbookInitialized事件中传入$event参数后，在可以通过args.spread获取spread的实例对象。这里对workbookInitialized事件做一个说明，workbookInitialized中可以通过args.spread获取spread对象，通过spread对象理论上我们可以在这里做任何spreadjs功能的事情，这里的事情是不通过angular2来进行处理的。这里可以做一些angular2中不支持绑定的spreadjs功能，例如：
angular2支持的spreadjs属性中没有筛选功能，那么如果我们要在angular2的工程中实现一个列的筛选功能我们应该怎么做呢？以上面的代码为例，我们可以在workbookInit方法中使用:
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);
这样就完成了在列上面增加绑定的功能。
|
workbookInitialized |
当workbook加载时，触发该事件。返回spread对象，args {spread}。 |
|
|
validationError |
GC.Spread.Sheets.Events.ValidationError |
当数据验证出错时触发该事件，args {sheet, sheetName, row, col, validator, validationResult}。 |
|
cellClick |
GC.Spread.Sheets.Events.CellClick |
单元格点击时触发该事件，args {sheet, sheetName, sheetArea, row, col, cancel}。 cancel的参数的意思是是否撤销操作,参数类型是boolean。后面不在对此参数进行说明 |
|
cellDoubleClick |
GC.Spread.Sheets.Events. CellDoubleClick |
双击单元格时触发该事件，args {sheet, sheetName, sheetArea, row, col, cancel}。 |
|
enterCell |
GC.Spread.Sheets.Events.EnterCell |
当焦点进入单元格时触发该事件，args {sheet, sheetName, row, col, cancel}。 |
|
leaveCell |
GC.Spread.Sheets.Events.LeaveCell |
当焦点从单元格离开时触发该事件，args{sheet, sheetName, row, col, cancel}。 |
|
valueChanged |
GC.Spread.Sheets.Events. ValueChanged |
当单元格的值被改变后触发该事件，args{sheet, sheetName, row, col}。 |
|
topRowChanged |
GC.Spread.Sheets.Events. TopRowChanged |
当垂直滚动条向下或向上滚动造成页面的第一行改变时触发该事件，args{sheet, sheetName, oldTopRow, newTopRow}。 |
|
leftColumnChanged |
GC.Spread.Sheets.Events. LeftColumnChanged |
当水平滚动条向左或向右滚动造成页面第一列改变时触发该事件，args{sheet, sheetName, oldLeftCol, newLeftCol}。 |
|
invalidOperation |
GC.Spread.Sheets.Events. InvalidOperation |
当无效操作发生时触发该事件，args{sheet, sheetName, invalidType, message}。 |
|
rangeFiltering |
GC.Spread.Sheets.Events.RangeFiltering |
单元格进行筛选处理时触发该事件，args{sheet, sheetName, col, filterValues}。 |
|
rangeFiltered |
GC.Spread.Sheets.Events.RangeFiltered |
单元格筛选处理完成后触发该事件，args{sheet, sheetName, col, filterValues}。 |
|
tableFiltering |
GC.Spread.Sheets.Events.TableFiltering |
列表进行筛选处理时触发该事件，args(sheet, sheetName, table, col, filterValues)。 |
|
tableFiltered |
GC.Spread.Sheets.Events.TableFiltered |
列表筛选处理完成 后触发该事件，args(sheet, sheetName, table, col, filterValues)。 |
|
rangeSorting |
GC.Spread.Sheets.Events.RangeSorting |
单元格进行排序处理时触发该事件，args(sheet, sheetName, col, ascending, cancel)。 |
|
rangeSorted |
GC.Spread.Sheets.Events.RangeSorted |
单元格排序处理完成后触发该事件，args(sheet, sheetName, col, ascending)。 |
|
clipboardChanging |
GC.Spread.Sheets.Events. ClipboardChanging |
剪贴板改变时触发该事件，args(sheet, sheetName, copyData)。 |
|
clipboardChanged |
GC.Spread.Sheets.Events. ClipboardChanged |
剪贴板改变后触发该事件，args(sheet, sheetName, copyData)。 |
|
clipboardPasting |
GC.Spread.Sheets.Events. ClipboardPasting |
剪贴板粘贴时触发该事件，args(sheet, sheetName, cellRange, pasteOption, pasteData)。 |
|
clipboardPasted |
GC.Spread.Sheets.Events. ClipboardPasted |
剪贴板粘贴后触发该事件，args(sheet, sheetName, cellRange, pasteOption, pasteData)。 |
|
columnWidthChanging |
GC.Spread.Sheets.Events. ColumnWidthChanging |
列宽改变时触发该事件，args(sheet, sheetName, colList, header, cancel)。 |
|
columnWidthChanged |
GC.Spread.Sheets.Events. ColumnWidthChanged |
列宽改变后触发该事件，args(sheet, sheetName, colList, header)。 |
|
rowHeightChanging |
GC.Spread.Sheets.Events. RowHeightChanging |
行高改变时触发该事件，args(sheet, sheetName, rowList, header, cancel)。 |
|
rowHeightChanged |
GC.Spread.Sheets.Events. RowHeightChanged |
行高改变后触发该事件，args(sheet, sheetName, rowList, header)。 |
|
dragDropBlock |
GC.Spread.Sheets.Events.DragDropBlock |
拖拽移动时触发事件，args(sheet, sheetName, fromRow, fromCol, toRow, toCol, rowCount, colCount, copy, insert, copyOption, cancel)。 |
|
dragDropBlockCompleted |
GC.Spread.Sheets.Events. DragDropBlockCompleted |
拖拽移动完成后触发事件，args(sheet, sheetName, fromRow, fromCol, toRow, toCol, rowCount, colCount, copy, insert, copyOption)。 |
|
dragFillBlock |
GC.Spread.Sheets.Events.DragFillBlock |
拖拽填充时触发事件，args(sheet, sheetName, fillRange, autoFillType, fillDirection, cancel)。 |
|
dragFillBlockCompleted |
GC.Spread.Sheets.Events. DragFillBlockCompleted |
拖拽填充完成后触发事件，args(sheet, sheetName, fillRange, autoFillType, fillDirection)。 |
|
editStarting |
GC.Spread.Sheets.Events.EditStarting |
当单元格进入编辑模式时触发事件，args(sheet, sheetName, row, col, cancel)。 |
|
editChange |
GC.Spread.Sheets.Events.EditChange |
当单元格处于编辑模式中并且所编辑的文本被改变时触发事件，args(sheet, sheetName, row, col, editingText)。 |
|
editEnding |
GC.Spread.Sheets.Events.EditEnding |
当单元格离开编辑模式时触发事件，args(sheet, sheetName, row, col, editor, editingText, cancel)。 |
|
editEnded |
GC.Spread.Sheets.Events.EditEnded |
当单元格离开编辑模式后触发事件，args(sheet, sheetName, row, col, editingText)。 |
|
rangeGroupStateChanging |
GC.Spread.Sheets.Events. RangeGroupStateChanging |
当改变分组情况时触发该事件，args(sheet, sheetName, isRowGroup, index, level, cancel)。 |
|
rangeGroupStateChanged |
GC.Spread.Sheets.Events. RangeGroupStateChanged |
当分组改变后触发事件，args(sheet, sheetName, isRowGroup, index, level)。 |
|
selectionChanging |
GC.Spread.Sheets.Events. SelectionChanging |
当选中的单元格发生改变时触发事件，args(sheet, sheetName, oldSelections, newSelections)。 |
|
selectionChanged |
GC.Spread.Sheets.Events. SelectionChanged |
当选中的单元格发生改变后触发事件，args(sheet, sheetName, oldSelections, newSelections)。 |
|
sheetTabClick |
GC.Spread.Sheets.Events.SheetTabClick |
当点击sheet页签时触发事件，args(sheet, sheetName, sheetTabIndex)。 |
|
sheetTabDoubleClick |
GC.Spread.Sheets.Events. SheetTabDoubleClick |
当双击sheet页签时触发事件，args(sheet, sheetName, sheetTabIndex)。 |
|
sheetNameChanging |
GC.Spread.Sheets.Events. SheetNameChanging |
当sheet的名称改变时触发事件，args(sheet, oldValue, newValue, cancel)。 |
|
sheetNameChanged |
GC.Spread.Sheets.Events. SheetNameChanged |
当sheet的名称改变完成后触发事件，args(sheet, oldValue, newValue)。 |
|
userZooming |
GC.Spread.Sheets.Events.UserZooming |
当用户进行缩放时触发该事件，args(sheet, sheetName, oldZoomFactor, newZoomFactor)。 |
|
userFormulaEntered |
GC.Spread.Sheets.Events. UserFormulaEntered |
当用户在单元格中输入公式后触发该事件，args(sheet, sheetName, row, col, formula)。 |
|
cellChanged |
GC.Spread.Sheets.Events.CellChanged |
当单元格值改变时触发该事件，args(sheet, sheetName, row, col, sheetArea, propertyName)。 |
|
columnChanged |
GC.Spread.Sheets.Events.ColumnChanged |
当选中列的index改变时触发该事件，args(sheet, sheetName, col, sheetArea, propertyName)。 |
|
rowChanged |
GC.Spread.Sheets.Events.RowChanged |
当选中行的index改变时触发该事件，args(sheet, sheetName, row, sheetArea, propertyName)。 |
|
activeSheetChanging |
GC.Spread.Sheets.Events. ActiveSheetChanging |
在当前sheet改变时触发该事件，args(oldSheet, newSheet, cancel) |
|
activeSheetChanged |
GC.Spread.Sheets.Events. ActiveSheetChanged |
在当前sheet改变后触发该事件，args(oldSheet, newSheet) |
|
sparklineChanged |
GC.Spread.Sheets.Events. SparklineChanged |
当迷你图改变后触发该事件，args(sheet, sheetName, sparkline) |
|
rangeChanged |
GC.Spread.Sheets.Events.RangeChanged |
当选中区域改变后触发该事件，args(sheet, sheetName, row, col, rowCount, colCount, changedCells, action) |
|
buttonClicked |
GC.Spread.Sheets.Events.ButtonClicked |
当按钮点击时触发该事件，args(sheet, sheetName, row, col, sheetArea) |
|
editorStatusChanged |
GC.Spread.Sheets.Events. EditorStatusChanged |
当编辑状态改变后触发事件，args(sheet, sheetName, oldStatus, newStatus) |
|
floatingObjectChanged |
GC.Spread.Sheets.Events. FloatingObjectChanged |
当浮动对象改变后触发事件，args(sheet, sheetName, floatingObject, propertyName) |
|
floatingObjectSelectionChanged |
GC.Spread.Sheets.Events. FloatingObjectSelectionChanged |
当选中的浮动对象改变后触发该事件，args(sheet, sheetName, floatingObject) |
|
pictureChanged |
GC.Spread.Sheets.Events.PictureChanged |
当图片改变时触发该事件，args(sheet, sheetName, picture, propertyName) |
|
floatingObjectRemoving |
GC.Spread.Sheets.Events. FloatingObjectRemoving |
当浮动对象移动时触发该事件，args(sheet, sheetName, floatingObject, cancel) |
|
floatingObjectRemoved |
GC.Spread.Sheets.Events. FloatingObjectRemoved |
当浮动对象移除后触发该事件，args(sheet, sheetName, floatingObject) |
|
pictureSelectionChanged |
GC.Spread.Sheets.Events. PictureSelectionChanged |
当选中的图片改变时触发该事件，args(sheet, sheetName, picture) |
|
floatingObjectLoaded |
GC.Spread.Sheets.Events. FloatingObjectLoaded |
当浮动对象加载时触发该事件，args(sheet, sheetName, floatingObject, element) |
|
touchToolStripOpening |
GC.Spread.Sheets.Events. TouchToolStripOpening |
用使用触屏时点击已选中单元格会弹出一个工具栏，当工具栏淡出之前会触发该事件，args( x, y, handled) |
|
commentChanged |
GC.Spread.Sheets.Events. CommentChanged |
注释改变后触发改事件，args(sheet, sheetName, comment, propertyName) |
|
commentRemoving |
GC.Spread.Sheets.Events. CommentRemoving |
注释删除时触发改事件，args(sheet, sheetName, comment, cancel) |
|
commentRemoved |
GC.Spread.Sheets.Events. CommentRemoved |
注释删除后触发改事件，args(sheet, sheetName, comment) |
|
slicerChanged |
GC.Spread.Sheets.Events.SlicerChanged |
当切片器改变后触发该事件，args(sheet, sheetName, slicer, propertyName) |
需要注意的是，所有的事件都是绑定在gc-spread-sheets 标签上的，绑定在其他标签上是无效的，这点请注意。
以上就是如何用angular2构建SpreadJS项目的全部内容，相信大家通过第一篇的基础搭建，再参考第二遍的属性与第三篇的事件文档后，可以心中期望的内容通过SpreadJS构建出来。
这里附上之前两篇博客的链接地址：
