熟悉jQuery的朋友一定熟悉它的datagrid组件,虽然不是专业的grid组件,但是使用起来还是相当方便的,功能也很到位,从1.2.4版本开始,datagrid添加了onRowContextMenu事件,即行右键事件,多用来处理右键菜单,还有一个是表头右键事件onHeaderContextMenu。
不过做项目的时候让用户还要点击一下右键才能弹出菜单,从交互上讲不是很友好,要是鼠标经过的时候就能弹出菜单,那就不错了,就像wordpress后台评论管理页面,鼠标经过评论列表的时候便会出现“删除”、“审核”等操作按钮。如何给jQuery easyui datagrid添加mouseover和mouseout事件,其实很简单。
首先打开jquery.easyui.min.js文件,搜索一下自身已经绑定的onRowContextMenu事件,然后依葫芦画瓢,就很简单了,只是添加事件,几乎不涉及复杂代码,在6019行左右搜索到以下代码:
[javascript]bind("contextmenu.datagrid",function(e){
var _400=$(this).attr("datagrid-row-index");
if(opts.onRowContextMenu){
opts.onRowContextMenu.call(_3fa,e,_400,data.rows[_400]);
}
});[/javascript]
同样的,还有一处,那就是默认值,大概在7405行左右:
[javascript]onRowContextMenu:function(e,_576,_577){
}[/javascript]
然后跟着样子绑定:
[javascript].bind("mouseover.datagrid",function(e){
var _400=$(this).attr("datagrid-row-index");
if(opts.onRowMouseoverMenu){
opts.onRowMouseoverMenu.call(_3fa,e,_400,data.rows[_400]);
}
}).bind('mouseout.datagrid', function(e) {
var _400 = $(this).attr('datagrid-row-index');
if (opts.onRowMouseoutMenu) {
opts.onRowMouseoutMenu.call(_3fa, e, _400, data.rows[_400]);
}
});[/javascript]
跟着样子设置默认值:
[javascript]onRowMouseoverMenu:function(e,_576,_577){
},onRowMouseoutMenu:function(e,_576,_577){
}[/javascript]
到这个地方就算搞定了,很容易吧,对javascript的原型继承机制还没有深入研究,所以也只能做些皮毛的改动了。
在实际应用的时候仅仅靠这两个事件是远远不够的,菜单的延时显示,已经快速经过row时要中断延时,直接不显示,这就要配合setTimeout和clearTimeout使用了,改了下easyui demo里面的datagrid3.html文件以做演示:
按着操作了 但是没有也没有显示
还没有具体 用过呢
不错好东西,支持分享
效果还不错
暂时技术还没那么好! 有的压力!
不懂,飘过
表示不知所云的飘过。。。
呵呵,鸭梨啊,看不懂
有点难度 表示要深入研究才行
表示有鸭梨。 ❓
@马路小生 如何给你压力了呢,求解释。
@世纪之光 鸭梨来自看不懂也。 ❗
@马路小生 其实我也不是很懂,主要是对javascript的原型基层机制还没有彻底理解。
菜单的延时显示,已经快速经过row时要中断延时,直接不显示,这就要配合setTimeout和clearTimeout使用了