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 了。

本文转自ITPUB博客77rou的博客,原文链接:SpreadJS 在 Angular2 中支持哪些事件? ,如需转载请自行联系原博主。

相关文章
|
3月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
55 0
|
3月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
51 0
|
3月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
95 0
|
3月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
44 0
|
3月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
48 0
|
3月前
|
JavaScript 开发者
从零基础到实战应用:Angular入门指南带你一步步构建你的第一个Web应用——全面介绍环境搭建、项目创建、组件开发与应用集成
【8月更文挑战第31天】本文档是针对初学者的Angular入门指南。通过详细步骤与示例代码,教你如何使用Angular CLI搭建开发环境、创建新项目、添加及配置组件,并运行首个应用。Angular是由Google开发的强大Web框架,专为高效构建复杂单页应用设计。按照本指南操作,你将能够快速上手Angular,开启Web应用开发之旅。
88 0