jqgrid表格下拉搜索多选框优化—使用select下拉多选插件 本是古典 何须时尚 2022-06-15 01:49 1567阅读 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
还没有评论,来说两句吧...