資訊專(zhuān)欄INFORMATION COLUMN
摘要：在上一篇文章中，我們學(xué)習(xí)了在中支持綁定的屬性，今天我們來(lái)介紹在中支持哪些事件。詳細(xì)的事件說(shuō)明，請(qǐng)參考博客。版本即將發(fā)布，更多更好的功能盡在新版本中，敬請(qǐng)期待登錄官網(wǎng)，了解更多。
SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網(wǎng)格功能控件，提供了完備的公式引擎、排序、過(guò)濾、輸入控件、數(shù)據(jù)可視化、Excel 導(dǎo)入/導(dǎo)出等功能，適用于 .NET、Java 和移動(dòng)端等各平臺(tái)在線編輯類(lèi) Excel 功能的表格程序開(kāi)發(fā)。
在上一篇文章中，我們學(xué)習(xí)了SpreadJS 在 Angular2 中支持綁定的屬性，今天我們來(lái)介紹 SpreadJS 在 Angular2 中支持哪些事件。
首先 Angular2 綁定事件的方法是在 template 中使用"( )"設(shè)置綁定事件，然后在導(dǎo)出模塊中編寫(xiě)事件觸發(fā)的方法，像這樣：
@Component({
selector: "my-app", template: ``,
})
export class AppComponent {
workbookInit (args) {
//do something
}
}
其中 $event 為 Angular2 的關(guān)鍵字，類(lèi)似于 window.event，SpreadJS 對(duì) $event 做了一些擴(kuò)展，如果需要在事件中對(duì) SpreadJS 相關(guān)的處理，那么可以傳入 $event 來(lái)獲取事件觸發(fā)的默認(rèn)參數(shù)，例如：
workbookInitialized 事件中傳入 $event 參數(shù)后，在可以通過(guò) args.spread 獲取 spread 的實(shí)例對(duì)象。這里對(duì)workbookInitialized事件做一個(gè)說(shuō)明，workbookInitialized中可以通過(guò) args.spread 獲取 spread 對(duì)象，通過(guò) spread 對(duì)象理論上我們可以在這里做任何 SpreadJS 功能的事情，這里的事情是不通過(guò) Angular2 來(lái)進(jìn)行處理的。這里可以做一些 Angular2 中不支持綁定的 SpreadJS 功能，例如：
Angular2 支持的 SpreadJS 屬性中沒(méi)有篩選功能，那么如果我們要在 Angular2 的工程中實(shí)現(xiàn)一個(gè)列的篩選功能我們應(yīng)該怎么做呢？以上面的代碼為例，我們可以在 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);
這樣就完成了在列上面增加綁定的功能。
詳細(xì)的事件說(shuō)明，請(qǐng)參考博客。
需要注意的是，所有的事件都是綁定在 gc-spread-sheets 標(biāo)簽上的，綁定在其他標(biāo)簽上是無(wú)效的。
以上就是如何用 Angular2 構(gòu)建 SpreadJS 項(xiàng)目的全部?jī)?nèi)容，相信大家通過(guò)第一篇的基礎(chǔ)搭建，再參考第二遍的屬性與第三篇的事件文檔后，已經(jīng)可以輕松的在 Angular2 的項(xiàng)目中使用 SpreadJS 了。
SpreadJS V10.2 版本即將發(fā)布，更多更好的功能盡在新版本中，敬請(qǐng)期待！
登錄 SpreadJS 官網(wǎng)，了解更多。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83867.html
摘要：日前，純前端表格控件發(fā)布了最新的版本，在此版本中增加了對(duì)的支持以及一些修復(fù)。其次，修改文件，將的相關(guān)引入到工程中。詳細(xì)的操作步驟，請(qǐng)參考下面的博客版本即將發(fā)布，更多更好的功能盡在新版本中，敬請(qǐng)期待登錄官網(wǎng)，了解更多。 showImg(https://segmentfault.com/img/bVPzFN?w=900&h=500);日前，純前端表格控件 SpreadJS 發(fā)布了最新的CT...
摘要：數(shù)百萬(wàn)前端開(kāi)發(fā)人員翹首期待的，日前宣布版本正式發(fā)布，全面支持是一款純前端表格控件，也是目前市面上唯一的最接近的純前端控件。葡萄城公司成立于年，是全球領(lǐng)先的集開(kāi)發(fā)工具商業(yè)智能解決方案管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。 數(shù)百萬(wàn)前端開(kāi)發(fā)人員翹首期待的SpreadJS，日前宣布V10.2版本正式發(fā)布，全面支持Angular2！ SpreadJS 是一款純前端表格控件，也是目前市面上唯一...
摘要：用不到行代碼，在前端實(shí)現(xiàn)的全部功能千萬(wàn)前端開(kāi)發(fā)者翹首企盼，終發(fā)布更新六大功能特性，帶來(lái)更多便利，用不到行代碼，在前端實(shí)現(xiàn)的全部功能是一款基于的純前端電子表格控件，以高速低耗高度類(lèi)似可無(wú)限擴(kuò)展為產(chǎn)品特色，提供移動(dòng)跨平臺(tái)和瀏覽器支持，同時(shí)滿(mǎn)足等 用不到100行代碼，在前端實(shí)現(xiàn)Excel的全部功能 千萬(wàn)前端開(kāi)發(fā)者翹首企盼，SpreadJS V12.2 終發(fā)布更新：六大功能特性，帶來(lái)更多便利，...
摘要：條件格式可包含多個(gè)規(guī)則，每一個(gè)規(guī)則可自定義條件與格式。通過(guò)簡(jiǎn)單的規(guī)則設(shè)置，可對(duì)表單中的大量數(shù)據(jù)進(jìn)行篩選并進(jìn)行直觀地表示和顯示。下面我們來(lái)看看在條件格式中，使用不同內(nèi)置條件規(guī)則的表單最終效果。 上一講中，在數(shù)據(jù)的呈現(xiàn)方面，首先為大家介紹了迷你圖，通過(guò)一句函數(shù)調(diào)用語(yǔ)句即可直觀顯示數(shù)據(jù)。那么，除了迷你圖，SpreadJS還提供了哪些數(shù)據(jù)的可視化支持呢？今天將繼續(xù)為大家介紹條件格式。 第四講：...
摘要：構(gòu)建一個(gè)自定義輸入組件今天我們來(lái)學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和同樣作用，但同時(shí)也具有自己的邏輯的輸入組件。值訪問(wèn)器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來(lái)還有最重要的一部分內(nèi)容，那就是讓我們的自定義組件獲得值訪問(wèn)權(quán)限。 構(gòu)建一個(gè)自定義 angular2 輸入組件 今天我們來(lái)學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和 同樣作用，但同時(shí)也具有自己的邏輯的輸入組件。 在讀這篇文章...
閱讀 2918·2021-11-23 09:51
閱讀 3443·2021-11-22 09:34
閱讀 3338·2021-10-27 14:14
閱讀 1548·2019-08-30 15:55
閱讀 3371·2019-08-30 15:54
閱讀 1103·2019-08-30 15:52
閱讀 1918·2019-08-30 12:46
閱讀 2872·2019-08-29 16:11
