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)文章
Ajax在Web應(yīng)用中的作用越來越大，許多工具都包含了對這一功能的使用，以下是對這些常用工具中Ajax的典型實例.2016-06-06
這篇文章主要介紹了jquery事件冒泡，以及如何阻止jQuery事件冒泡現(xiàn)象，感興趣的朋友可以參考一下2016-01-01
這篇文章主要為大家詳細(xì)介紹了jquery.masonry瀑布流效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
從今天起正式學(xué)習(xí)Jquery（實際嚴(yán)格講已經(jīng)用了幾個月的Jquery的一丁點東西），邊學(xué)邊做邊記筆記；閱讀書籍《鋒利的Jquery》+Jquery API Doc。2009-10-10
下面小編就為大家?guī)硪黄猨Query中的一些常見方法小結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
雖然前面已經(jīng)寫過兩篇關(guān)于DivAlert的隨筆了，也已經(jīng)實現(xiàn)了我的需求，但是今天發(fā)現(xiàn)很多jQuery插件代碼中都使用了extend方法，這樣確實讓默認(rèn)設(shè)置的代碼減少了許多。2010-04-04
本文主要分享了編寫設(shè)置和獲取顏色的插件，該插件用來實現(xiàn)兩個功能：1.設(shè)置元素的顏色;2.獲取元素的顏色。 具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jquery實現(xiàn)簡單的拖拽效果實例兼容所有主流瀏覽器(優(yōu)化篇)
相對于上一篇，優(yōu)化了拖拽的效果，具體的代碼及截圖如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)最簡單實用的分秒倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery對象和DOM對象的相互轉(zhuǎn)化實現(xiàn)代碼
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象；2010-03-03