熟悉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]); |
同样的，还有一处，那就是默认值，大概在7405行左右：
1 |
onRowContextMenu:function(e,_576,_577){
|
然后跟着样子绑定：
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]); |
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]); |
跟着样子设置默认值：
1 |
onRowMouseoverMenu:function(e,_576,_577){
|
2 |
},onRowMouseoutMenu:function(e,_576,_577){
|
到这个地方就算搞定了，很容易吧，对javascript的原型继承机制还没有深入研究，所以也只能做些皮毛的改动了。
在实际应用的时候仅仅靠这两个事件是远远不够的，菜单的延时显示，已经快速经过row时要中断延时，直接不显示，这就要配合setTimeout和clearTimeout使用了，改了下easyui demo里面的datagrid3.html文件以做演示：
点击此处查看演示效果