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();
, , -, 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 中支持哪些事件?的更多相关文章

  1. SpreadJS 在 Angular2 中支持绑定哪些属性?

    SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...

  2. Spring中ApplicationContext对事件的支持

    Spring中ApplicationContext对事件的支持   ApplicationContext具有发布事件的能力.这是因为该接口继承了ApplicationEventPublisher接口. ...

  3. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...

  4. 深刻理解:C#中的委托、事件

    C#中的事件还真是有点绕啊,以前用JavaScript的我,理解起来还真是废了好大劲!刚开始还真有点想不明白为什么这么绕,想想和JS的区别,最后终于恍然大悟! C#中事件绕的根本原因: C#的方法,它 ...

  5. 解决Firefox/Opera 不支持onselectstart事件实现不允许用户select

    在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本,本文为大家解决下火狐中如何实现不能选择,由此需求的朋友可以参考下,希望对大家有所帮助       ...

  6. 关于ios苹果系统的中的右键事件,查遍了全网都没有的小技巧。

    前阵子公司要求写一套手机端,兼容各种平台和系统,当然,pc端也没有放过. 我用了bootstrap框架和jq.在安卓中的右键事件只需要取消浏览器默认事件,然后长按就可以触发pc端的右键事件,非常好,一 ...

  7. vlc 在ie11 中的addEventListener事件不触发

    在vlc控件中触发一事件,在IE11之前的版本使用attachEvent注册一个回调函数后IE11可以捕获到事件,但IE11中提示attachEvent不支持.经查询发现IE11已经去掉了attach ...

  8. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  9. 【转】C# 中的委托和事件

    阅读目录 C# 中的委托和事件 引言 将方法作为方法的参数 将方法绑定到委托 事件的由来 事件和委托的编译代码 委托.事件与Observer设计模式 .Net Framework中的委托与事件 总结 ...

随机推荐

  1. 开发人员不可不看的 OBD通讯协议知识

    OBD-II Network Standards» J1850 VPW– Adopted by GM; also known as Class 2.– Adopted by Chrysler (kno ...

  2. [CF960F]Pathwalks

    题目大意:给你一张$n$个点$m$条边的带权有向图,可能有重边和自环.边会按照顺序给出.让你求出一条最长的路径,使得路径上的边满足边权和出现的时间严格递增.路径可以重复经过同一个点. 想办法把它转化成 ...

  3. java如何调用接口 2

    在实际开发过程中,我们经常需要调用对方提供的接口或测试自己写的接口是否合适,所以,问题来了,java如何调用接口?很多项目都会封装规定好本身项目的接口规范,所以大多数需要去调用对方提供的接口或第三方接 ...

  4. 解题报告:hdu 1005 number subsequent

    2017-09-06 20:35:59 writer:pprp 本来以为这是一道水题,写了一个递归就赶紧交上去了, 结果超时了,看看数据范围100000000,肯定把栈给爆了 想用记忆化的方法,但是虽 ...

  5. LightOJ 1341 Aladdin and the Flying Carpet(唯一分解定理)

    http://lightoj.com/volume_showproblem.php?problem=1341 题意:给你矩形的面积(矩形的边长都是正整数),让你求最小的边大于等于b的矩形的个数. 思路 ...

  6. GridControl 史上最全的资料(一)

    GridControl详解(一)原汁原味的表格展示 Dev控件中的表格控件GridControl控件非常强大.不过,一些细枝末节的地方有时候用起来不好找挺讨厌的.使用过程中,多半借助Demo和英文帮助 ...

  7. mac 下如何建立vue-cli项目

    command+space : terminal //检测是否存在node node -v //检测是否带有npm安装管理工具 npm -v //具备进行下一步 //在documnets下建立vue文 ...

  8. 数据库访问辅助类SqlHelper

    程序访问数据库需要进行的操作有创建与某个指定数据库的连接, 然后打开创建好的连接,创建执行指令(也就是sql执行代码), 最后执行指令,关闭创建的连接,释放资源. ado.net是一组用于和数据源进行 ...

  9. CSS元素隐藏的11种方法

    { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; cl ...

  10. windows service 2008 内存吃尽解决方案

    最近用windows2008,发现系统运行一段时间后,内存吃紧,赶紧打开资源查看器,发现当前运行的程序占有内存都很小,后经查资料,原来是被windows2008的文件缓存吃尽了,这是windows20 ...