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

点击此处查看演示效果

chaunceyhao