凌晨四点的蓝

熟悉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文件以做演示：

点击此处查看演示效果