SpreadJS 在 Angular2 中支援哪些事件？

 純前端表格控制元件是基於 HTML5 的 JavaScript 電子表格和網格功能控制元件，提供了完備的公式引擎、排序、過濾、輸入控制元件、資料視覺化、Excel 匯入/匯出等功能，適用於 .NET、Java 和移動端等各平臺線上編輯類 Excel 功能的表格程式開發。

在上一篇文章中，我們學習了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 做了一些擴充套件，如果需要在事件中對 SpreadJS 相關的處理，那麼可以傳入 $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);

這樣就完成了在列上面增加繫結的功能。

詳細的事件說明，請參考部落格。

需要注意的是，所有的事件都是繫結在 gc-spread-sheets 標籤上的，繫結在其他標籤上是無效的。

以上就是如何用 Angular2 構建 SpreadJS 專案的全部內容，相信大家透過第一篇的基礎搭建，再參考第二遍的屬性與第三篇的事件文件後，已經可以輕鬆的在 Angular2 的專案中使用 SpreadJS 了。

SpreadJS V10.2 版本即將釋出，更多更好的功能盡在新版本中，敬請期待！

登入 ，瞭解更多。