jqgrid表格插件應(yīng)該是表格插件中最強大吧，最近項目需要使用jqgrid但又要根據(jù)項目需求進行一些私人訂制，還好jqgrid的源碼寫清晰易懂。

jqgrid有個下拉搜索的功能，我們先看下官網(wǎng)的展示，網(wǎng)址：http://www.guriddo.net/demo/bootstrap/。

下拉單選搜索樣式還過得去可以將就，使用的html5原生的select。

先簡單說下這個下拉搜索的API吧

colModel參數(shù)中 要進行下拉搜索的列 添加 style:"select" ，如果下拉的選項是 預(yù)先知道 就添加?searchoptions選項，如果為多選下拉搜索 再添加?multiple:true。

例如

{name:'operateType',label:'操作類型',align:"center",width: 100, frozen: true,
? ? ? ? ? ? stype: "select",

? ? ? ? ? ? ?? multiple:true,?
? ? ? ? ? ? ? ? ? ? searchoptions: { multiple:true, value: ":[All];ALFKI:ALFKI;ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT" }

}

如果你的下拉選項要從后臺獲取，需要配置dataUrl選項 返回的是 select的html字符串代碼。

順便插一句，如果選項中有中文，要注意編碼，由于項目中用的spring mvc ，就在 controller方法上添加@RequestMapping(value = "getColDownSelect", produces = "text/html;charset=utf-8") 添加produces 編碼就可以啦。

單選的效果

多選的效果

知道原生的多選是怎么操作的嗎？安裝Ctrl鍵 然后 點擊不同的選項就可以選擇多個。我們程序員當(dāng)然會啦，如果你讓客戶這么去操作保證絕對不打死你，這么復(fù)雜的操作，所以有很多多選下拉框的js插件就應(yīng)運而生了。用的比較多的jquery.multiSelect.js 、bootstrap-multiselect.js、multiple-select.js等等。

下面進入重點了，本人上面3插件都去試過，發(fā)現(xiàn)無一例外 展示選項的 元素?zé)o法顯示，3種都不展示！！！那就應(yīng)該是jqgrid的結(jié)構(gòu)樣式對下選項影響了。

下面我使用mutiple-select.js來做下拉多選。看下圖，單擊下拉選項 相應(yīng)的div 存在于 html結(jié)構(gòu)當(dāng)中 只是被遮住，另外2種插件也是同樣的情況。

?

起初以為與z-index有關(guān)，然后改變z-index 并沒有什么卵用。然后就去惡補css 相關(guān)知識也咨詢了前端的同事 ，說有可能是 父元素 設(shè)置overflow:hidden影響的。后面發(fā)現(xiàn)果然是overflow影響的 搜索框向上的4個祖先元素有overflow:hidden，將其改成visible就可以展示了。

但是樣式也 賊亂了吧，調(diào)整下樣式吧，最后看下效果，這樣是不是 整潔很多了吧。

下面貼下代碼，代碼很簡單，核心就是在 jqgrid拼接 select html 完之后使用 select 多選插件，然后在調(diào)整樣式。

這里說下，本人jqgrid使用的??Guriddo jqGrid JS - v5.1.1 - 2016-06-08 這個版本 ，就是上面官網(wǎng)那個。

在源碼$($t).triggerHandler("jqGridAddEditAfterSelectUrlComplete", [elem]);這行下面添加

$(elem).css("padding","0 0");//為多選的時候if($(elem).attr("multiple")){$(elem).multipleSelect({selectAllText:"全選",selectAllDelimiter:["",""]});//內(nèi)容展示不了修改$(elem).next().css("overflow","visible").parents("div:eq(0)").css("overflow","visible").parents("th:eq(0)").css("overflow","visible").parents(".ui-jqgrid-hdiv").css("overflow","visible");//樣式調(diào)整$(elem).next().css({"padding":"0 0","height":"24px","border":"0"}).children("button").css({"margin-left":"0px","height":"24px"}).children("div").css({"position":"absolute"});$(elem).next().children(".ms-drop").css("position","absolute");}
在第二處的setAttributes(elem, options, ['value']); 后面添加?

setTimeout(function(){$(elem).css("padding","0 0");//多選的時候if($(elem).attr("multiple")){$(elem).multipleSelect({selectAllText:"全選",selectAllDelimiter:["",""]});//內(nèi)容展示不了$(elem).next().css("overflow","visible").parents("div:eq(0)").css("overflow","visible").parents("th:eq(0)").css("overflow","visible").parents(".ui-jqgrid-hdiv").css("overflow","visible");//樣式兼容$(elem).next().css({"padding":"0 0","height":"24px","border":"0"}).children("button").css({"margin-left":"0px","height":"24px"}).children("div").css({"position":"absolute"});$(elem).next().children(".ms-drop").css("position","absolute");}},5);
這里加setTimeout是如果使用dataUrl時，先將select渲染完了然后再使用下拉多選插件。

使用其他下拉插件也一樣，根據(jù)展示的下拉選項 將其 祖先元素 的overflow 改成visible可見 然后 下拉選項又是絕對定位 會飄出文檔流就展示到表格上方了，然后就是具體情況具體調(diào)整樣式了。

好了，收工。

總結(jié)

以上是生活随笔為你收集整理的jqgrid表格下拉搜索多选框优化—使用select下拉多选插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。