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可见 然后 下拉选项又是绝对定位 会飘出文档流就展示到表格上方了,然后就是具体情况具体调整样式了。

好了,收工。



相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页