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

       我们的任务管理系统是基于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);