SpreadJS 在 Angular2 中支持哪些事件？

姘搁『发布于2019-08-20 17:47 / 900人阅读

摘要：在上一篇文章中，我们学习了在中支持绑定的属性，今天我们来介绍在中支持哪些事件。详细的事件说明，请参考博客。版本即将发布，更多更好的功能尽在新版本中，敬请期待登录官网，了解更多。

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 对象存储支持事件通知腾讯云事件中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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