最近我们再做系统前台改版,表格用的jqgrid,领导提出了一个需求让我很是头疼。
我们做的是直接在表格进行编辑,然后再把数据传到后台处理,其中有一列是通过下拉框将预置数据显示出来供用户选择。这个时候用户需要先点击一下要编辑的这列进去jqgrid的编辑模式,然后再点击一下才能展开下拉框的内容,领导说这样太麻烦,要做到点击一下既能进去编辑模式又要展开下拉框,我一开始认为挺简单的,根据下拉框的id调用一下click事件不就行了吗!就是这样子的$("#id").click();发现完全没用,这下就头疼了。
后来我查阅了很多资料发现了可以通过改变size来使select呈现出类似展开的效果,代码是这样的$("#id").attr("size",length);length就是你下拉框里的子元素的数量,这样子虽然展开了但是却非常丑,又让我陷入了苦恼,后来在一个外国的网站上给我了一些思路,大致就是模拟鼠标点击下拉框,具体代码如下:
function open(id){//id就是html元素select的id
var elem =$("#"+id);
if(document.createEvent){
e.initMouseEvent("mousedown");
elem[0].dispatchEvent(e);
}else if(element.fireEvent){
elem[0].fireEvent("onmousedown");
}
}
我在指定列进去编辑模式就调用这个方法即可实现一次点击即可进入编辑模式又可以展开下拉框,由于公司不能电脑没有上外网,所以使用手机写的,如果有写错的地方各位大佬予以指正,希望能给那些也在做类似操作的小伙伴儿们以帮助!