SpreadJS 在 Angular2 中支持哪些事件?
来源:互联网 发布:极品网络女神sally 编辑:程序博客网 时间:2024/06/05 20:47
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 官网,了解更多。
- SpreadJS 在 Angular2 中支持哪些事件?
- SpreadJS 在 Angular2 中支持绑定哪些属性?
- SpreadJS 全面支持 Angular2,V10.2 版本即将发布
- 在angular2服务中注入服务
- 在Angular2中使用Observable对象
- JS中有哪些事件
- Angular2事件绑定
- 事件委托在哪些场景中使用,该如何使用,及其实现原理?
- 在ASP.NET Core中使用Angular2,以及与Angular2的Token base身份认证
- Angular2 ng-content 在组件中嵌入内容
- Angular2 ng-content 指令在组件中嵌入内容
- Angular2部署在IIS中解决404刷新问题
- 在Angular2.0 或 Angular4.0 中使用Jquery
- 如何在angular2中引用FontAwesome字体中的图标?
- SpreadJS电子表格
- SpreadJS 纯前端表格控件推出新版本,正式支持Angular 2
- 7.揭秘angular2学习 ------- 事件
- C语言中关于哪些数据放在哪些区?
- JDK环境安装
- MP4 moov编码完成时写入头部
- Android 6.0以上系统的 RecyclerView 在HorizontalScrollView或者Scrollview中显示不全问题
- 资源记录
- OpenGL学习笔记--字体库freetype2、FTGL
- SpreadJS 在 Angular2 中支持哪些事件?
- mysql设置数据库注意事项
- mysql workbench 存储过程
- BZOJ1833[count 数字计数]
- 颜色识别
- Linux上查看造成IO高负载的进程
- Algorithms exercise 8.8
- Android开发-备忘录模式在Android的应用和模拟实验
- 《一个Android工程的从零开始》-3、base(二) BaseActivity布局相关代码——空布局控件的运用