基于SpringMVC+Jquery+html5的开发中解决多选控件操作的浏览区兼容实践

该博客介绍基于SpringMVC+Jquery+html5开发的任务管理系统,在IE11和Chrome浏览器的兼容问题。如控件数据传参、多选下拉框数据保存、GET传参中文支持、对话框页面缓存等问题,并给出相应的代码修改和处理方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       我们的任务管理系统是基于SpringMVC+Jquery+html5的开发的。建议在chrome上运行最完美。IE9及以下,显示都有问题。IE升级到11,可以有效兼容HTML5,可以正常显示了。因此领导希望,对于IE至少要支持到IE11.

       具体实践中,发现IE11和chrome在对于控件的数据传参上是有区别的,这就要求我们在代码处理时候要区别对待。

      在一个给用户分配权限的界面,发现chrome可以支持,但是IE11就无法保存数据。经过代码比较,发现IE11的传参支持字符串,但是不支持数据对象。但是chrome可以直接支持数据对象。因此取值方法就完全不同。

      原来的前端代码如下:

<select id="roleId" name="roleId" multiple="multiple" style="width: 100%">
                <c:forEach var="upmsRole" items="${upmsRoles}">
                    <option value="${upmsRole.roleId}">${upmsRole.title}</option>
                </c:forEach>
            </select>

原来后端取值代码如下:

 String[] roleIds = request.getParameterValues("roleId");
                upmsUserRoleService.role(roleIds, id);

这在基于webkit引擎的chrome浏览器上没有问题,因为其支持数据对象传参。前端多选下拉框选择的数据,在后端可以直接以数组对象返回。可是在IE11,这样写法就不支持了。经过测试,前后端应该如下修改。

修改后的前端如下:

<select id="roleId" name="roleId" multiple="multiple" style="width: 100%" onchange="javascript:roleChange();">
                <c:forEach var="upmsRole" items="${upmsRoles}">
                    <option value="${upmsRole.roleId}">${upmsRole.title}</option>
                </c:forEach>
            </select>

 <input type="hidden" id="roleId_str" value="${roleId_str}" class="form-control" name="roleId_str"/>


.....

....
  function roleChange() {



        var select = document.getElementById("roleId");

        var selStr = "";

        for (i = 0; i < select.length; i++) {
            if (select.options[i].selected) {

                selStr = selStr + "," + select[i].value;

            }
        }

        $("#roleId_str").val(selStr);

    }

修改后的后端如下:

 String[] roleIds = StringUtils.split(roleId_str, ",");
                upmsUserRoleService.role(roleIds, id);

可以看到,IE11只支持字符串传参,所以要前端利用JS代码,把多选的操作,赋值到隐藏域控件中。后端从该控件取值是一个逗号分隔的字符串。在后端,依据分隔符号,可以很容易转换为数字对象,后续就可以正常操作了。数据的修改保存就实现了。

 

当然IE11和chrome在兼容操作上还有问题需要注意。1)IE11的GET传参不支持中文,Chrome没有问题。我的解决方法是用英文代替,显示时候,在后端替换为中文;2)IE11中的对话框调用的页面,数据更新后一直显示之前缓存数据,会让用户误以为操作失败,而chrome没有此问题。我经过研究发现,人为刷新下该页面,就可以正常显示了。我对于IE11特点采用了讨巧的办法。数据更新后,在前端页面自动打开小窗口刷新该URL,然后在1秒后,自动关闭。前端操作,会有一闪感觉,但是基本不影响操作体验和流畅性。作为暂时方案就这样处理了。希望读者有更好方法,发现后,可以分享我。

具体前端代码如下:

function closeMyWin(mywin) {
        mywin.close();

    }


...
...
...
roleDialog.close();
                    $table.bootstrapTable('refresh');
                    // var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
                    // var isOpera = userAgent.indexOf("Opera") > -1;
                    // if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                    //"IE";
                    var mywin = window.open('${basePath}/manage/user/role/' + roleUserId, "", "height=5, width=5,top=5,left=5, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
                    setTimeout(closeMyWin, 1000, mywin);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值