JQuery-EasyUIDatagrid數(shù)據(jù)行鼠標(biāo)懸停/離開(kāi)事件（onMouseOver/onMouseOut）

基于JQuery EasyUI 1.3.5版本

創(chuàng)新互聯(lián)公司專注于高陽(yáng)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城開(kāi)發(fā)。高陽(yáng)網(wǎng)站建設(shè)公司,為高陽(yáng)等地區(qū)提供建站服務(wù)。全流程按需策劃設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

兩種方式，

一、修改easy-ui提供的js，缺點(diǎn)是直接修改源文件，后續(xù)版本升級(jí)存在問(wèn)題

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

    參考提供的事件實(shí)現(xiàn)方式，對(duì)mouseover和mouseout進(jìn)行實(shí)現(xiàn)，mouseout事件實(shí)現(xiàn)代碼：

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時(shí)添加onMouseOver和onMouseOut事件

二、在datagrid創(chuàng)建時(shí)，實(shí)現(xiàn)其loadSucess事件，缺點(diǎn)是每個(gè)需要鼠標(biāo)懸空功能時(shí)都需要實(shí)現(xiàn)，以及對(duì)表格加載數(shù)據(jù)進(jìn)行遍歷過(guò)濾

實(shí)現(xiàn)方式為：

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

    

部分引自碼農(nóng)先生的csdn博客：擴(kuò)展 jQuery EasyUI Datagrid 數(shù)據(jù)行鼠標(biāo)懸停/離開(kāi)事件（onMouseOver/onMouseOut）

當(dāng)前名稱：JQuery-EasyUIDatagrid數(shù)據(jù)行鼠標(biāo)懸停/離開(kāi)事件（onMouseOver/onMouseOut）
文章鏈接：http://bm7419.com/article2/phoeic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、關(guān)鍵詞優(yōu)化、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)