EasyUI Datagrid 用戶列表鼠標懸停/離開數據行

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 事件

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

擴展後如圖所示：

2、擴展添加 onMouseOutRow 事件

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

擴展後如圖所示：

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

<script type="text/javascript">
    $(function(){
        $('#baidu').datagrid({
            url: 'www.baidu.com',
            fit:true,
            fitColumns: true,
            pagination:true,
            pageSize:10,
            pageList:[10,20,50,80],
            singleSelect:true,
            onMouseOverRow:function(e, rowIndex, rowData){
                alert("Over~");
            },
            onMouseOutRow:function(e,rowIndex, rowData){
                alert("Out~");
            }
        });
    });
</script>

擴展 jQuery EasyUI Datagrid 數據行鼠標懸停離開事件demo下載：http://download.csdn.net/detail/for_china2012/6419133

效果圖如下：

【第二種實現方式】

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

onLoadSuccess:function(){
    $(".datagrid-row").mouseover(function(){
        var url = $(this).children("td").eq(0).text();
        if (url == "") {
            $("#show_img").attr("src", "${ctx}/images/person.jpg");
        } else {
            $("#show_img").attr("src", "${ctx}/" + url);
        }
        $("#preview").css("top", ($(this).offset().top - xOffset) + "px").css("left", ($(this).offset().left + yOffset) + "px").fadeIn("slow");
    });
    $(".datagrid-row").mouseout(function(){
        $("#preview").hide();
    });
}

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

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

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