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代碼:
說明:其中的單引號(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)站的支持!
- 基于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)頁背景變灰的方法
- js 點(diǎn)擊按鈕彈出另一頁,選擇值后,返回到當(dāng)前頁
- JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
相關(guān)文章
jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器(優(yōu)化篇)
相對(duì)于上一篇,優(yōu)化了拖拽的效果,具體的代碼及截圖如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06jQuery實(shí)現(xiàn)最簡單實(shí)用的分秒倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)最簡單實(shí)用的分秒倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)化實(shí)現(xiàn)代碼
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象;2010-03-03