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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
开启BootStrap学习之旅
May 04 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
javascript中call,apply,bind的区别详解
Dec 11 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
sina的lightbox效果。
2007/01/09 Javascript
利用javascript中的call实现继承
2007/01/22 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JS实现div居中示例
2014/04/17 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
js友好的时间返回函数
2016/08/24 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
英语生日邀请函
2014/01/23 职场文书
大专学生求职信
2014/07/04 职场文书
医德医风自我评价
2014/09/19 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python