给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行左右搜索到以下代码：

1	bind("contextmenu.datagrid",function(e){

2	var _400=$(this).attr("datagrid-row-index");

3	if(opts.onRowContextMenu){

4	opts.onRowContextMenu.call(_3fa,e,_400,data.rows[_400]);

5

}

6

});

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

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

2

}

然后跟着样子绑定：

01	.bind("mouseover.datagrid",function(e){

02	var _400=$(this).attr("datagrid-row-index");

03	if(opts.onRowMouseoverMenu){

04	opts.onRowMouseoverMenu.call(_3fa,e,_400,data.rows[_400]);

05

}

06	}).bind('mouseout.datagrid', function(e) {

07	var _400 = $(this).attr('datagrid-row-index');

08	if (opts.onRowMouseoutMenu) {

09	opts.onRowMouseoutMenu.call(_3fa, e, _400, data.rows[_400]);

10

}

11

});

跟着样子设置默认值：

1	onRowMouseoverMenu:function(e,_576,_577){

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

3

}

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

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

点击此处查看演示效果