JQuery-EasyUI Datagrid數據行鼠標懸停/離開事件（onMouseOver/onMouseOut）

基于JQuery EasyUI 1.3.5版本

兩種方式，

一、修改easy-ui提供的js，缺點是直接修改源文件，后續版本升級存在問題

    easyui中的datagrid設置每行的class為datagrid-row-over和datagrid-row，在源代碼中查找到與datagrid-row-over相關的實現代碼（大概在7636行），根據腳本 7619 行看出，此段腳本是為 Datagrid 綁定 mouseover 事件，緊接著便是 mouseout 事件的綁定。

    參考提供的事件實現方式，對mouseover和mouseout進行實現，mouseout事件實現代碼：

var row=opts.finder.getRow(_52c,_53d);
opts.onMouseOverRow.call(_52c,e,_53d,row);

在opts.finder.getTr(_52c,_53d).removeClass("datagrid-row-over");e.stopPropagation();之間加入以上代碼；

    然后，在定義datagrid時添加onMouseOver和onMouseOut事件

二、在datagrid創建時，實現其loadSucess事件，缺點是每個需要鼠標懸空功能時都需要實現，以及對表格加載數據進行遍歷過濾

實現方式為：

$("#"+dgID).datagrid({
    columns : [[{name:"id",hidden:true}, f2, f3,......[],
    idField : idField,
    onLoadSuccess : function(value){
        $(". datagrid-row").mouseover(function(value){
            //獲取當前行的唯一標識field
            var uniqueRow = $(this).children("td").eq(0).text();
            var loadData = $("#"+dgID).datagrid("getData").rows;
            var index = 0;
            var currentRowData = null;
            //獲取選中行綁定的數據以及index
            for(index; index < loadData.length; index++){
                currentRowData = loadData[index];
                if(currentRowData.id == uniqueRow){
                    break;
                }
            }
            
            //判斷是否為選中行的數據
            if(currentRowData.id != uniqueRow){
                return;
            }
            
            //進行針對該行數據的其他處理
        });
        $(". datagrid-row").mouseout(function(value){
            //對鼠標所在行數據的獲取與mouseover的實現類似
        });
    }
})

部分引自碼農先生的csdn博客：擴展 jQuery EasyUI Datagrid 數據行鼠標懸停/離開事件（onMouseOver/onMouseOut）