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

本是古典何须时尚 2022-06-15 01:49 1650阅读 0赞

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

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

![Center][]

下拉单选搜索样式还过得去可以将就，使用的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 编码就可以啦。

单选的效果

![Center 1][]

多选的效果

![Center 2][]

**知道原生的多选是怎么操作的吗？安装Ctrl键 然后 点击不同的选项就可以选择多个。我们程序员当然会啦，如果你让客户这么去操作保证绝对不打死你，这么复杂的操作，所以有很多多选下拉框的js插件就应运而生了。用的比较多的jquery.multiSelect.js 、bootstrap-multiselect.js、multiple-select.js等等。**

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

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

![Center 3][]

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

![Center 4][]

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

![Center 5][]

**下面贴下代码，代码很简单，核心就是在 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可见 然后 下拉选项又是绝对定位 会飘出文档流就展示到表格上方了，然后就是具体情况具体调整样式了。**

**好了，收工。**

[Center]: /images/20220615/9c1449fe5f6a4bdf81fe2d472499a025.png
[Center 1]: /images/20220615/e7e29998312f4fb5906862c76a6bff81.png
[Center 2]: /images/20220615/523494568db54003b525d7a32cece920.png
[Center 3]: /images/20220615/654551616dbb48788855756d35e80e18.png
[Center 4]: /images/20220615/2909de98f924468a8009071ed5276f4a.png
[Center 5]: /images/20220615/6e84956e0504435fb9e6bcaec2e7f755.png