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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 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技术开发技巧分享
2010/03/23 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
解析Python中的二进制位运算符
2015/05/13 Python
python Django批量导入不重复数据
2016/03/25 Python
Python内置函数delattr的具体用法
2017/11/23 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
实例介绍Python中整型
2019/02/11 Python
Python魔法方法详解
2019/02/13 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python 实现矩阵按对角线打印
2019/11/29 Python
django框架forms组件用法实例详解
2019/12/10 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
班级文化标语
2014/06/23 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
色戒观后感
2015/06/12 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
Python序列化与反序列化相关知识总结
2021/06/08 Python