擴充 jQuery EasyUI Datagrid 資料行滑鼠懸停/離開事件（onMouseOver/onMouseOut）

客戶需求：

jQuery EasyUI Datagrid 使用者清單滑鼠懸停/離開資料行時顯示人員頭像（onMouseOver/onMouseOut）

如圖所示，Datagrid 滑鼠懸停/離開資料行時切換了不同的樣式顯示：

此時用谷歌開發者工具審查滑鼠懸停行元素時發現，table tr 節點 class 屬性中增加了 datagrid-row-over 樣式：

于是打開 jquery.easyui.min.js 腳本，查找 datagrid-row-over 關鍵字，6983 行中發現關鍵字：

根據腳本 6974 行看出，此段腳本是為 Datagrid 綁定 mouseover 事件，緊接着便是 mouseout 事件的綁定。

之後參照文章http://www.loststop.com/archive/soft-and-internet/3819.html修改，發現作者用的版本為 jQuery EasyUI 1.2.4 ，奈何 jQuery EasyUI 現在已更新版本至 1.3.4（注：本文使用 jQuery EasyUI 1.3.2 版），腳本内容較之前版本變化太大，遂照葫蘆畫瓢摸索着擴充了 Datagrid 的 mouseover  及 mouseout 事件，具體步驟如下：

1、擴充添加 onMouseOverRow 事件

[javascript]  view plain copy print ?

1. var row=opts.finder.getRow(_4a5,_4af);  
2. opts.onMouseOverRow.call(_4a5,e,_4af,row);  

擴充後如圖所示：

2、擴充添加 onMouseOutRow 事件

[javascript]  view plain copy print ?

1. var row=opts.finder.getRow(_4a5,_4b1);  
2. opts.onMouseOutRow.call(_4a5,e,_4b1,row);  

擴充後如圖所示：

至此，隻需四句代碼即可實作 Datagrid mouseover 及 mouseout 事件的擴充，擴充後具體應用如下：

[javascript]  view plain copy print ?

1. <script type="text/javascript">  
2.     $(function(){  
3.         $('#baidu').datagrid({  
4.             url: 'www.baidu.com',  
5.             fit:true,  
6.             fitColumns: true,  
7.             pagination:true,  
8.             pageSize:10,  
9.             pageList:[10,20,50,80],  
10.             singleSelect:true,  
11.             onMouseOverRow:function(e, rowIndex, rowData){  
12.                 alert("Over~");  
13.             },  
14.             onMouseOutRow:function(e,rowIndex, rowData){  
15.                 alert("Out~");  
16.             }  
17.         });  
18.     });  
19. </script>  

擴充 jQuery EasyUI Datagrid 資料行滑鼠懸停離開事件demo下載下傳：http://download.csdn.net/detail/for_china2012/6419133

效果圖如下：

【第二種實作方式】

這種方式較第一種來說簡單實用，具體實作代碼如下：

[java]  view plain copy print ?

1. onLoadSuccess:function(){  
2.     $(".datagrid-row").mouseover(function(){  
3.         var url = $(this).children("td").eq(0).text();  
4.         if (url == "") {  
5.             $("#show_img").attr("src", "${ctx}/images/person.jpg");  
6.         } else {  
7.             $("#show_img").attr("src", "${ctx}/" + url);  
8.         }  
9.         $("#preview").css("top", ($(this).offset().top - xOffset) + "px").css("left", ($(this).offset().left + yOffset) + "px").fadeIn("slow");  
10.     });  
11.     $(".datagrid-row").mouseout(function(){  
12.         $("#preview").hide();  
13.     });  
14. }  

在 DataGrid 初始化時通過 onLoadSuccess 時間綁定資料表格行滑鼠懸停離開事件，審查元素得知，DataGrid 生成的資料表格行都含有class=“datagrid-row”樣式，之後通過 jQuery 獲得目前行下指定列内容即可：

[javascript]  view plain copy print ?

1. var url = $(this).children("td").eq(0).text();  

獲得内容之後怎麼處理就交給你了。。。