SpreadJS 在 Angular2 中支援哪些事件？

標籤：angular2   spreadjs   

650) this.width=650;" src="http://images2015.cnblogs.com/blog/978677/201707/978677-20170705164321019-1020752807.png" width="695" height="386" />

SpreadJS 純前端表格控制項是基於 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 版本即將發布，更多更好的功能盡在新版本中，敬請期待！

登入 SpreadJS 官網，瞭解更多。

本文出自 “葡萄城控制項技術團隊部落格” 部落格，謝絕轉載！

SpreadJS 在 Angular2 中支援哪些事件？