SpreadJS 在 Angular2 中支持哪些事件？

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 官網，瞭解更多。