EasyUI兼容IE方法

1、EasyUI 兼容 IE6 的方法总结1. 背景1.1 项目介绍XX服务平台从 7 月低开始框架搭建，前端UI框架确定使用目前功能比较完善的Jquery EasyUI（没有考虑到客户方目前使用的浏览器大部分都是IE6，项目设计初期的不严谨）。11 初基本功能开发完成，期间一直致力于功能的实现和数据的一致性的核查，并没有太多关注浏览器的兼容性和性能问题。经过在客户现场几次演示的结果，暴露出严重的性能问题和兼容性问题，在IE6 下，系统基本不能运行。于是开始着手调整这些问题。1.2 框架介绍优点：JQuery EasyUI 是目前功能比较齐全的一套 UI 框架，为我们提供了大多数UI控件的使用，如

2、：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等，方便开发人员使用，提高开发效率，正是基于这些考虑，项目设计的时候决定使用该框架。缺点：界面兼容程度不够，不过大部分都发生在IE6下，在 IE7+ 、FF等浏览器中显示正常。2. 详细分析2.1 页面重复加载问题1) 问题现象点击左侧的菜单，右侧页面被加载了两次。2) 问题分析修改前部分代码$(document).ready(function()$('#header').panel(href: ctx +'/view/common/header.js

3、p',onLoad:function()$("div.topMenu li a").click(function()$(this).addClass("topMenu-item-current");$(this).parent().siblings().children().removeClass("topMenu-item-current");if(this.id = "js") $('#main').panel("refresh",ctx +"/view/b

4、usi/busi_index.jsp"); addLeftClick();else if(this.id = "cl") .);););function addLeftClick()$('#main').panel( onLoad:function() $(".leftMenu li a").click(function()$(this).addClass("selected");$(this).parent().siblings().children().removeClass("selected

5、");); ); ;修改后部分代码$(document).ready(function()$('#header').panel(href: ctx +'/view/common/header.jsp',onLoad:function()$("div.topMenu li a").click(function()$(this).addClass("topMenu-item-current");$(this).parent().siblings().children().removeClass("topMe

6、nu-item-current");if(this.id = "js") addLeftClick(ctx +"/view/busi/busi_index.jsp"); else if(this.id = "cl") .);););function addLeftClick(url)$('#main').panel( onLoad:function() $(".leftMenu li a").click(function()$(this).addClass("selected&q

7、uot;);$(this).parent().siblings().children().removeClass("selected");); ).panel("refresh",url); ;代码实现的功能是点击主菜单的时候，刷新下面的 panel 控件，加载新页面，并且默认选择左侧菜单的第一个。修改前的代码是先刷新页面，再添加 onLoad 监听事件，导致panel 刷新两次，页面重复加载，修改后先添加 onLoad 监听事件，再加载页面。2.2 加载速度慢的问题1) 问题现象在 IE6 下，点击左侧的菜单，要5s 左右才开始刷新右侧页面，出现右边长

8、时间空白。2) 问题分析1、页面开始使用$('#myPanel').panel(fit:true,content:'<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>');将 iframe 作为 panel的内容面板加载，panel 刷新本身需要花费一些时间，调整后直接用 iframe，将 panel 去

9、掉2、右侧iframe 的页面大量使用了easyui 的控件，大部分都是以class 样式的形式使用对于 easyui 的时间控件DateBox 和DateTimeBox，IE6 在渲染的时候，很耗费时间，导致页面长时间显示空白，最后更换成新的时间控件My97DatePicker ，页面响应时间提高 3s 左右对于页面上的 ComboBox 控件，在 select 组件上加了 class="easyui-combobox"，页面初始加载的时候就开始渲染这些组件，导致页面响应缓慢，最后将easyui 的样式和属性全部去掉，在页面加载完成的方法里再渲染，加载后台数据的同时渲染页

10、面，提高效率。2.3 页面闪烁问题1) 问题现象在 IE6 下，点击左侧的菜单，有几个菜单点击后，整个页面会全部刷白，出现如下的情况，短时间的闪烁感觉。2) 问题分析页面开始使用原生 HTML 标签 select ，而且没有用 ComboBox 组件渲染。IE6 在加载 select 组件时导致页面闪烁，最后全部用 ComboBox 组件。页面上的DataGrid 组件的分页栏这个分页栏的“页面显示数据条数”，也是采用 select 实现的，而且控件默认是显示该功能的，最后修改在公共 js 里加入 $.fn.pagination.defaults.showPageList = false;将控

11、件的默认设置改为不显示。2.4 页面不加载，提示 js 错误问题1) 问题现象在 IE6 下，页面加载是提示js 错误，页面停止加载。2) 问题分析 修改前部分代码$('#gridTableB').datagrid( url:'',method : 'post',loadMsg : '数据载入中，请稍等.',pagination : true,rownumbers : true,columns : field : 'gesBsmAlarm.occurOrgidName',title : '区域',w

12、idth : 35,sortable : true, /请注意，引起错误的位置，多了一个 逗号, field : 'gesBsmAlarm.equipModel',title : '告警类型',width : 60,sortable : true );Easyui 的 DataGrid 控件的属性最后一项，不能写一个 “,”，这在 IE7+ 和FF 等浏览器下没有问题，在 IE6 下报js 错误。2.5 DataGrid 上自定义按钮的导出不反应问题1) 问题现象在 IE6 下， DataGrid 的分页自定义按钮上的导出报表功能不起作用，并且后台程序会报错，前

13、台无任何反应。2) 问题分析修改前代码 $(function()$('#custCircuitTable').datagrid(url : '',pagination : true,rownumbers : true,columns : field : 'str0',title : '省中心',align : 'center',width : 80,styler : changeColor );var pager = $('#custCircuitTable').datagrid('getP

14、ager');pager.pagination( buttons : title : 'ddddd',iconCls : 'icon-export',handler : function() exportExcel(); ););Easyui 对 DataGrid 的分页控件的自定义按钮解析时，解析成下图的形式其中的 a 标签的 href="javascript:void(0)"，在 IE6 下，当点击这个链接时，IE6中会先执行a 中的javascript:void(0) ，之后IE6 认为请求已经结束，其实真正的请求在 exportExcel(); 方法里执行了，并且请求了后台的数据，后台执行完成之后，返回数据到前台，发现请求已经被关闭，然后后台就报错了。最后代码修改后全部不再采用DataGrid的自定义分页按钮，用 LinkButton 实现，并给 href=”#”。2.6 依旧存在的问题1) 问题现象在 IE6 下，快速定位资源客户树上的客户，速度很慢2) 问题分析IE6 执行js 的选择元素和创建对象的方法速度很慢，但是在树形结构中，查找一个节点的时候需要大量选择元素和创建对象，导致方法执行缓慢，目前尚未找到好的解决方案。3. 总结通过端到端系统的实战，对 easyui