给easyui datagrid 添加mouseover和mouseout事件

熟悉jQuery的朋友一定熟悉它的datagrid组件,虽然不是专业的grid组件,但是使用起来还是相当方便的,功能也很到位,从1.2.4版本开始,datagrid添加了onRowContextMenu事件,即行右键事件,多用来处理右键菜单,还有一个是表头右键事件onHeaderContextMenu。

不过做项目的时候让用户还要点击一下右键才能弹出菜单,从交互上讲不是很友好,要是鼠标经过的时候就能弹出菜单,那就不错了,就像wordpress后台评论管理页面,鼠标经过评论列表的时候便会出现“删除”、“审核”等操作按钮。如何给jQuery easyui datagrid添加mouseover和mouseout事件,其实很简单。

首先打开jquery.easyui.min.js文件,搜索一下自身已经绑定的onRowContextMenu事件,然后依葫芦画瓢,就很简单了,只是添加事件,几乎不涉及复杂代码,在6019行左右搜索到以下代码:

bind("contextmenu.datagrid",function(e){
var _400=$(this).attr("datagrid-row-index");
if(opts.onRowContextMenu){
opts.onRowContextMenu.call(_3fa,e,_400,data.rows[_400]);
}
});

同样的,还有一处,那就是默认值,大概在7405行左右:

onRowContextMenu:function(e,_576,_577){
}

然后跟着样子绑定:

.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]);
}
});

跟着样子设置默认值:

onRowMouseoverMenu:function(e,_576,_577){
},onRowMouseoutMenu:function(e,_576,_577){
}

到这个地方就算搞定了,很容易吧,对javascript的原型继承机制还没有深入研究,所以也只能做些皮毛的改动了。

在实际应用的时候仅仅靠这两个事件是远远不够的,菜单的延时显示,已经快速经过row时要中断延时,直接不显示,这就要配合setTimeout和clearTimeout使用了,改了下easyui demo里面的datagrid3.html文件以做演示:

点击此处查看演示效果

小雪转中雪

14 Comments On 给easyui datagrid 添加mouseover和mouseout事件

  1. avatar

    按着操作了 但是没有也没有显示

  2. avatar

    还没有具体 用过呢

  3. avatar

    不错好东西,支持分享

  4. avatar

    效果还不错

  5. avatar

    暂时技术还没那么好! 有的压力!

  6. avatar

    不懂,飘过

  7. avatar

    表示不知所云的飘过。。。

  8. avatar

    呵呵,鸭梨啊,看不懂

  9. avatar

    有点难度 表示要深入研究才行

  10. avatar

    表示有鸭梨。 ❓

  11. avatar

    菜单的延时显示,已经快速经过row时要中断延时,直接不显示,这就要配合setTimeout和clearTimeout使用了

| 真的AJAX提交哦

发表评论