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