EasyUI 兼容 IE6 方法总结
1. 背景
1.1 项目介绍
安徽XXXXXX服务平台从 7 月低开始框架搭建，前端UI框架确定使用目前功能比较完善的Jquery EasyUI（没有考虑到客户方目前使用的浏览器大部分都是IE6，项目设计初期的不严谨）。11 初基本功能开发完成，期间一直致力于功能的实现和数据的一致性的核查，并没有太多关注浏览器的兼容性和性能问题。经过在客户现场几次演示的结果，暴露出严重的性能问题和兼容性问题，在IE6 下，系统基本不能运行。于是开始着手调整这些问题。
1.2 框架介绍
优点：JQuery EasyUI 是目前功能比较齐全的一套 UI 框架，为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等，方便开发人员使用，提高开发效率，正是基于这些考虑，项目设计的时候决定使用该框架。
缺点：界面兼容程度不够，不过大部分都发生在IE6下，在 IE7+ 、FF等浏览器中显示正常。
2. 详细分析
2.1 页面重复加载问题
1) 问题现象
点击左侧的菜单，右侧页面被加载了两次。
2) 问题分析
1修改前部分代码
$(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("topMenu-item-current");
if(this.id == "js") {
$('#main').panel("refresh",ctx +"/view/busi/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");
});
}
});
};
2修改后部分代码
$(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("topMenu-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");
$(this).parent().siblings().children().removeClass("selected");
});
}
}).panel("refresh",url);
};
代码实现的功能是点击主菜单的时候，刷新下面的 panel 控件，加载新页面，并且默认选择左侧菜单的第一个。
修改前的代码是先刷新页面，再添加 onLoad 监听事件，导致panel 刷新两次，页面重复加载，修改后先添加 onLoad 监听事件，再加载页面。
2.2 加载速度慢的问题
1) 问题现象
在 IE6 下，点击左侧的菜单，要5s 左右才开始刷新右侧页面，出现右边长时间空白。
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 去掉
2、右侧iframe 的页面大量使用了easyui 的控件，大部分都是以class 样式的形式使用
1对于 easyui 的时间控件DateBox 和DateTimeBox，IE6 在渲染的时候，很耗费时间，导致页面长时间显示空白，最后更换成新的时间控件My97DatePicker ，页面响应时间提高 3s 左右
2对于页面上的 ComboBox 控件，在 select 组件上加了 class="easyui-combobox"，页面初始加载的时候就开始渲染这些组件，导致页面响应缓慢，最后将easyui 的样式和属性全部去掉，在页面加载完成的方法里再渲染，加载后台数据的同时渲染页面，提高效率。
2.3 页面闪烁问题
1) 问题现象
在 IE6 下，点击左侧的菜单，有几个菜单点击后，整个页面会全部刷白，出现如下的情况，短时间的闪烁感觉。
2) 问题分析
1页面开始使用原生 HTML 标签 select ，而且没有用 ComboBox 组件渲染。
IE6 在加载 select 组件时导致页面闪烁，最后全部用 ComboBox 组件。
2页面上的DataGrid 组件的分页栏
这个分页栏的“页面显示数据条数”，也是采用 select 实现的，而且控件默认是显示该功能的，最后修改在公共 js 里加入
$.fn.pagination.defaults.showPageList = false;
将控件的默认设置改为不显示。
2.4 页面不加载，提示 js 错误问题
1) 问题现象
在 IE6 下，页面加载是提示js 错误，页面停止加载。
2) 问题分析
1 修改前部分代码
$('#gridTableB').datagrid( {
url:'',
method : 'post',
loadMsg : '数据载入中，请稍等...',
pagination : true,
rownumbers : true,
columns : [ [{
field : 'gesBsmAlarm.occurOrgidName',
title : '区域',
width : 35,
sortable : true, //请注意，引起错误的位置，多了一个 逗号
}, {
field : 'gesBsmAlarm.equipModel',
title : '告警类型',
width : 60,
sortable : true
}] ]
});
Easyui 的 DataGrid 控件的属性最后一项，不能写一个 “,”，这在 IE7+ 和FF 等浏览器下没有问题，在 IE6 下报js 错误。
2.5 DataGrid 上自定义按钮的导出不反应问题
1) 问题现象
在 IE6 下， DataGrid 的分页自定义按钮上的导出报表功能不起作用，并且后台程序会报错，前台无任何反应。
2) 问题分析
1修改前代码
$(function(){
$('#custCircuitTable').datagrid({
url : '',
pagination : true,
rownumbers : true,
columns : [ [ {
field : 'str0',
title : '省中心',
align : 'center',
width : 80,
styler : changeColor
} ] ]
});
var pager = $('#custCircuitTable').datagrid('getPager');
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 框架有了更深的认识，个人使用的一些感受：
1遇到问题并且没有好的解决思路的时候，大致浏览一下官方的文档，或许你现在遇到的问题，框架的开发人员都已经给你解决好了，不必劳神了。
2遇到问题并且查找了半天没有找到原因的时候，将你的代码缩减到最简单，对比官方给的Demo，找到有哪些差异，逐个排除。
3遇到问题实在解决不了的时候，你需要深入理解框架的实现原理，对每一个控件的工作方式、控件处理数据的逻辑大致了解，查看控件最终在页面的展示形式，判断自己的数据是否符合要求。
