jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼
在使用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代碼：
說(shuō)明：其中的單引號(hào)我使用了"\"進(jìn)行轉(zhuǎn)義。請(qǐng)求URL中的參數(shù)值從rowObject中獲取。
2、其次，以上代碼添加好后Table中處理操作按鈕，但僅僅是操作按鈕，在點(diǎn)擊【操作】按鈕的時(shí)候彈出層被Table的行所遮住了，即在Table行下層彈出，所以并不能看到想要的彈出層，這是JqGrid留下的坑，經(jīng)過(guò)幾番論戰(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 基于Android實(shí)現(xiàn)點(diǎn)擊某個(gè)按鈕讓菜單選項(xiàng)從按鈕周圍指定位置彈出
- js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
- jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效
- 遮罩層點(diǎn)擊按鈕彈出并且具有拖動(dòng)和關(guān)閉效果（兩種方法）
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕彈出一個(gè)可關(guān)閉層窗口同時(shí)網(wǎng)頁(yè)背景變灰的方法
- js 點(diǎn)擊按鈕彈出另一頁(yè)，選擇值后，返回到當(dāng)前頁(yè)
- JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
相關(guān)文章
基于jquery trigger函數(shù)無(wú)法觸發(fā)a標(biāo)簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無(wú)法觸發(fā)a標(biāo)簽的兩種解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
收集的10個(gè)免費(fèi)的jQuery相冊(cè)
或許在網(wǎng)絡(luò)上你已經(jīng)見(jiàn)過(guò)數(shù)百種通過(guò)jQuery實(shí)現(xiàn)的相冊(cè)，但是我們發(fā)現(xiàn)的這些相冊(cè)，他們有額外的東西，優(yōu)雅和獨(dú)特的創(chuàng)意！每個(gè)相冊(cè)都是可在線預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。2011-02-02
jQuery滿意度星級(jí)評(píng)價(jià)插件特效代碼分享
這篇文章主要介紹了jQuery滿意度星級(jí)評(píng)價(jià)插件特效,我們可以自定義每個(gè)五角星代表的分值，鼠標(biāo)滑過(guò)五角星時(shí)即可計(jì)算當(dāng)前的分值，這款jQuery評(píng)分插件非常簡(jiǎn)單而且實(shí)用。有需要的小伙伴可以參考下2015-08-08
本文是小編給大家?guī)?lái)的jquery卸載全部事件的思路，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧！2017-04-04
jquery實(shí)現(xiàn)適用于門戶站的導(dǎo)航下拉菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)適用于門戶站的導(dǎo)航下拉菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單項(xiàng)實(shí)現(xiàn)下拉列表顯示效果的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery HTML設(shè)置內(nèi)容和屬性操作實(shí)例分析
這篇文章主要介紹了jQuery HTML設(shè)置內(nèi)容和屬性操作,結(jié)合實(shí)例形式分析了jQuery HTML設(shè)置內(nèi)容和屬性相關(guān)函數(shù)與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery實(shí)現(xiàn)搜索框常見(jiàn)效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)搜索框常見(jiàn)效果的方法,可實(shí)現(xiàn)搜索框文字顯示效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery中append()方法用法,以實(shí)例形式較為詳細(xì)的分析了append()方法的功能、定義與使用技巧,并對(duì)比分析了與text()方法的區(qū)別,需要的朋友可以參考下2014-12-12
通過(guò)最終效果發(fā)現(xiàn)，當(dāng)頭像處于最前面時(shí)，圖像最大，透明低。越往后頭像就越小，就越透明2011-12-12