在使用JqGrid時(shí)，Table中最后一列是操作列，在操作列中每一行都有一個(gè)操作按鈕，該操作按鈕和下拉菜單非常類似，下面給大家分享jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧

在使用JqGrid時(shí)，Table中最后一列是操作列，在操作列中每一行都一個(gè)操作按鈕，該操作按鈕類似下拉菜單，如下圖：

在點(diǎn)擊Table中【操作】一列時(shí)需要彈出一個(gè)Div層，該Div層中包含一堆按鈕，用于對(duì)Table行進(jìn)行操作，如下：

解決步驟如下：

1、首先，在colModel中的列上添加屬性edittype:'select'和方法formatter:groupGrid.formatOptions，如下圖：

方便復(fù)制，代碼如下：

{label:'操作',name: 'operations',index: 'operations',width: 80, sortable: false,align:'center',cellattr: addCellAttr, 
editable:true,edittype:'select',formatter:groupGrid.formatOptions 
}

formatOptions方法如下圖，方法中拼接了html代碼：

說明：其中的單引號(hào)我使用了"\"進(jìn)行轉(zhuǎn)義。請(qǐng)求URL中的參數(shù)值從rowObject中獲取。

2、其次，以上代碼添加好后Table中處理操作按鈕，但僅僅是操作按鈕，在點(diǎn)擊【操作】按鈕的時(shí)候彈出層被Table的行所遮住了，即在Table行下層彈出，所以并不能看到想要的彈出層，這是JqGrid留下的坑，經(jīng)過幾番論戰(zhàn)與掙扎后發(fā)現(xiàn)需要自己去設(shè)置CSS樣式。

解決辦法如下：

A、添加屬性cellattr，其值設(shè)置為“addCellAttr”，即：

cellattr: addCellAttr

B、編寫addCellAttr方法事件，如下圖：

方便復(fù)制，代碼如下：

function addCellAttr(rowId, val, rawObject, cm, rdata) { 
return "style='overflow: visible;'"; 
}

添加好后實(shí)現(xiàn)的效果如下所示：

以上所述是小編給大家介紹的jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: