Gird事件机制初级读本


Posted in Javascript onMarch 10, 2007

原文地址 文章日期:2006/09/25/

 新版.32 的YUI-EXT包含了GIRD事件机制的重要升级。许多新事件现在可以用了,监听事件的机制也改变了(尽管它仍然向后兼容)。

侦听事件的方法

鉴于 YAHOO.util.CustomEvent只提供简单的访问,Grid和相关的对象扩展了新的方法来侦听事件,这些事件你应该是熟悉的。它们是:

  • addListener(eventName, fn, scope, override) - "eventName" should be one of the events defined below. "fn" is the function to call when the event occurs. "scope" is an optional object providing the scope (this) of the function. "override" is whether or not to apply that scope and is only there for backwards compatibility.
  • removeListener(eventName, fn, scope) -移除前先提交的事件侦听
  • on(eventName, fn, scope, override) - addListener 快捷方式

这些方法与YAHOO.uitl.Event一样,有相同的署名(signatures)。

onRowSelect事件的侦听:

var sm = grid.getSelectionModel(); 
sm.addListener('rowselect', myHandler);

这是GIRD暴露事件的列表和参数简介:

- "this" 指的是Grid对象;
- "e" 指的是 YAHOO.ext.EventObject (常规化事件对象) ,除了Drag & Drop对象是标准浏览器事件对象。
- "dd" 指的是Grid的YAHOO.ext.GridDD对象。

译注:下面事件解释以原文方式提供以便读者准确理解:

  • cellclick - (this, rowIndex, columnIndex, e) - Fires when a cell is clicked
  • celldblclick - (this, rowIndex, columnIndex, e) - Fires when a cell is double clicked
  • rowclick - (this, rowIndex, e) - Fires when a row is clicked
  • rowdblclick - (this, rowIndex, e) - Fires when a row is double clicked
  • headerclick - (this, columnIndex, e) - Fires when a header is clicked
  • rowcontextmenu - (this, rowIndex, e) - Fires when a row is right clicked
  • headercontextmenu - (this, columnIndex, e) - Fires when a header is right clicked
  • beforeedit - (this, rowIndex, columnIndex, e) - Fires just before editing is started on a cell
  • afteredit - (this, rowIndex, columnIndex, e) - Fires immediately after a cell is edited
  • bodyscroll - (scrollLeft, scrollTop) - Fires when the grid's body is scrolled
  • columnresize - (columnIndex, newSize) Fires when the user resizes a column.
  • startdrag - (this, dd, e) - Fires when row(s) start being dragged
  • enddrag - (this, dd, e) - Fires when a drag operation is complete
  • dragdrop - (this, dd, targetId, e) - Fires when dragged row(s) are dropped on a valid DD target
  • dragover - (this, dd, targetId, e) Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
  • dragenter - (this, dd, targetId, e) - Fires when the dragged row(s) first cross another DD target while being dragged
  • dragout - (this, dd, targetId, e) - Fires when the dragged row(s) leave another DD target while being dragged

Gird事件的例子

function onCellClick(grid, rowIndex, colIndex, e){  
 alert('Cell at row ' + rowIndex + ', column ' + colIndex + ' was clicked!'); 
 } 
 var grid = ... // 这里注册事件 grid.addListener('cellclick', onCellClick);

 

普通Grid事件
Since there is no way to envision everything you may want to do with the grid, I've also exposed direct access to many of the grid's raw events. All of these events pass one parameter to their handler: "e" a YAHOO.ext.EventObject.
  • click
  • dblclick
  • mousedown
  • mouseup
  • mouseover
  • mouseout
  • keypress
  • keydown
LoadableDataModel (from which XMLDataModel and JSONDataModel are derived) picked up a useful new event:
beforeload - Fires right before the model starts fetching remote data.
You could use this event combined with the load event to hide/show a loading indicator.
var img = getEl('loading-indicator'); var dm = grid.getDataModel(); dm.addListener('beforeload', img.show, img, true); dm.addListener('load', img.hide, img, true);
Hopefully this can get you started with the new event system. If you have any questions, feel free to post in the Help Forum and I will help you out.
Jack
Javascript 相关文章推荐
js获取当月最后一天实例代码
Nov 19 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
js实现简单的计算器功能
Jan 16 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-2
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 #Javascript
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 #Javascript
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php 字符串函数收集
2010/03/29 PHP
php array的学习笔记
2012/05/10 PHP
PHP Class&Object -- 解析PHP实现二叉树
2013/06/25 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python进阶_浅谈面向对象进阶
2017/08/17 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
销售找工作求职信
2013/12/20 职场文书
股东授权委托书范文
2014/09/13 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
毕业横幅标语
2014/10/08 职场文书
卖房协议书样本
2014/10/30 职场文书
员工升职自荐信
2015/03/27 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android
MySQL中varchar和char类型的区别
2021/11/17 MySQL