jqgrid表格下拉搜索多选框优化—使用select下拉多选插件

jqgrid表格插件应该是表格插件中最强大吧，最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制，还好jqgrid的源码写清晰易懂。

jqgrid有个下拉搜索的功能，我们先看下官网的展示，网址：http://www.guriddo.net/demo/bootstrap/。

下拉单选搜索样式还过得去可以将就，使用的html5原生的select。

先简单说下这个下拉搜索的API吧

colModel参数中 要进行下拉搜索的列 添加 style:"select" ，如果下拉的选项是 预先知道 就添加 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键 然后 点击不同的选项就可以选择多个。我们程序员当然会啦，如果你让客户这么去操作保证绝对不打死你，这么复杂的操作，所以有很多多选下拉框的js插件就应运而生了。用的比较多的jquery.multiSelect.js 、bootstrap-multiselect.js、multiple-select.js等等。

下面进入重点了，本人上面3插件都去试过，发现无一例外 展示选项的 元素无法显示，3种都不展示！！！那就应该是jqgrid的结构样式对下选项影响了。

下面我使用mutiple-select.js来做下拉多选。看下图，单击下拉选项 相应的div 存在于 html结构当中 只是被遮住，另外2种插件也是同样的情况。

 

起初以为与z-index有关，然后改变z-index 并没有什么卵用。然后就去恶补css 相关知识也咨询了前端的同事 ，说有可能是 父元素 设置overflow:hidden影响的。后面发现果然是overflow影响的 搜索框向上的4个祖先元素有overflow:hidden，将其改成visible就可以展示了。

但是样式也 贼乱了吧，调整下样式吧，最后看下效果，这样是不是 整洁很多了吧。

下面贴下代码，代码很简单，核心就是在 jqgrid拼接 select html 完之后使用 select 多选插件，然后在调整样式。

这里说下，本人jqgrid使用的  Guriddo jqGrid JS - v5.1.1 - 2016-06-08 这个版本 ，就是上面官网那个。

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

$(elem).css("padding","0 0");
								//为多选的时候
								if($(elem).attr("multiple")){
									$(elem).multipleSelect({selectAllText:"全选",selectAllDelimiter:["",""]});
									//内容展示不了修改
									$(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");
								}

在第二处的setAttributes(elem, options, ['value']); 后面添加 

setTimeout(function(){
						$(elem).css("padding","0 0");
						//多选的时候
						if($(elem).attr("multiple")){
							$(elem).multipleSelect({selectAllText:"全选",selectAllDelimiter:["",""]});
							//内容展示不了
							$(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渲染完了然后再使用下拉多选插件。

使用其他下拉插件也一样，根据展示的下拉选项 将其 祖先元素 的overflow 改成visible可见 然后 下拉选项又是绝对定位 会飘出文档流就展示到表格上方了，然后就是具体情况具体调整样式了。

好了，收工。