SpreadJS 在 Angular2 中支持哪些事件？

姘擱『發布于2019-08-20 17:47 / 1005人閱讀

摘要：在上一篇文章中，我們學習了在中支持綁定的屬性，今天我們來介紹在中支持哪些事件。詳細的事件說明，請參考博客。版本即將發布，更多更好的功能盡在新版本中，敬請期待登錄官網，了解更多。

SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網格功能控件，提供了完備的公式引擎、排序、過濾、輸入控件、數據可視化、Excel 導入/導出等功能，適用于 .NET、Java 和移動端等各平臺在線編輯類 Excel 功能的表格程序開發。

在上一篇文章中，我們學習了SpreadJS 在 Angular2 中支持綁定的屬性，今天我們來介紹 SpreadJS 在 Angular2 中支持哪些事件。

首先 Angular2 綁定事件的方法是在 template 中使用"( )"設置綁定事件，然后在導出模塊中編寫事件觸發的方法，像這樣：

@Component({

selector: "my-app",
template: 
  `
`,

})

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

GPU云服務器云服務器事件支持 spreadjs 對象存儲支持事件通知騰訊云事件中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83867.html

SpreadJS 全面支持 Angular2，V10.2 版本即將發布

摘要：日前，純前端表格控件發布了最新的版本，在此版本中增加了對的支持以及一些修復。其次，修改文件，將的相關引入到工程中。詳細的操作步驟，請參考下面的博客版本即將發布，更多更好的功能盡在新版本中，敬請期待登錄官網，了解更多。 showImg(https://segmentfault.com/img/bVPzFN?w=900&h=500);日前，純前端表格控件 SpreadJS 發布了最新的CT...

Caicloud 2019-08-21 15:55 評論0 收藏0
SpreadJS 純前端表格控件推出新版本，正式支持Angular 2

摘要：數百萬前端開發人員翹首期待的，日前宣布版本正式發布，全面支持是一款純前端表格控件，也是目前市面上唯一的最接近的純前端控件。葡萄城公司成立于年，是全球領先的集開發工具商業智能解決方案管理系統設計工具于一身的軟件和服務提供商。數百萬前端開發人員翹首期待的SpreadJS，日前宣布V10.2版本正式發布，全面支持Angular2！ SpreadJS 是一款純前端表格控件，也是目前市面上唯一...

hizengzeng 2019-08-20 18:28 評論0 收藏0
SpreadJS 純前端表格控件 V12.2 發布更新

摘要：用不到行代碼，在前端實現的全部功能千萬前端開發者翹首企盼，終發布更新六大功能特性，帶來更多便利，用不到行代碼，在前端實現的全部功能是一款基于的純前端電子表格控件，以高速低耗高度類似可無限擴展為產品特色，提供移動跨平臺和瀏覽器支持，同時滿足等用不到100行代碼，在前端實現Excel的全部功能千萬前端開發者翹首企盼，SpreadJS V12.2 終發布更新：六大功能特性，帶來更多便利，...

FrozenMap 2019-08-26 10:45 評論0 收藏0
系統開發內嵌 “在線Excel” 教程 (4) – 條件格式

摘要：條件格式可包含多個規則，每一個規則可自定義條件與格式。通過簡單的規則設置，可對表單中的大量數據進行篩選并進行直觀地表示和顯示。下面我們來看看在條件格式中，使用不同內置條件規則的表單最終效果。上一講中，在數據的呈現方面，首先為大家介紹了迷你圖，通過一句函數調用語句即可直觀顯示數據。那么，除了迷你圖，SpreadJS還提供了哪些數據的可視化支持呢？今天將繼續為大家介紹條件格式。第四講：...

岳光 2019-08-23 10:39 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

CNZPH 2019-08-02 15:56 評論0 收藏0