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 相关文章推荐
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
vue实现扫码功能
Jan 17 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
JavaScript监听键盘事件代码实现
Jun 03 Javascript
js实现微信聊天界面
Aug 09 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
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
DOM 基本方法
2009/07/18 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python 读取修改pcap包的例子
2019/07/23 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
机械个人求职信范文
2014/01/24 职场文书
小学信息技术教学反思
2014/02/10 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
单位承诺书格式
2014/05/21 职场文书
校庆活动策划方案
2014/06/05 职场文书
人口与计划生育责任书
2015/05/09 职场文书
民事申诉状范本
2015/05/20 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
中学校园广播稿
2015/08/18 职场文书
六年级作文之关于梦
2019/10/22 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
python多次执行绘制条形图
2022/04/20 Python