EasyUI兼容IE的方法.docx
- 文档编号:30097949
- 上传时间:2023-08-05
- 格式:DOCX
- 页数:12
- 大小:369.02KB
EasyUI兼容IE的方法.docx
《EasyUI兼容IE的方法.docx》由会员分享,可在线阅读,更多相关《EasyUI兼容IE的方法.docx(12页珍藏版)》请在冰豆网上搜索。
EasyUI兼容IE的方法
EasyUI兼容IE6方法总结
1.背景
1.1项目介绍
安徽XXXXXX服务平台从7月低开始框架搭建,前端UI框架确定使用目前功能比较完善的JqueryEasyUI(没有考虑到客户方目前使用的浏览器大部分都是IE6,项目设计初期的不严谨)。
11初基本功能开发完成,期间一直致力于功能的实现和数据的一致性的核查,并没有太多关注浏览器的兼容性和性能问题。
经过在客户现场几次演示的结果,暴露出严重的性能问题和兼容性问题,在IE6下,系统基本不能运行。
于是开始着手调整这些问题。
1.2框架介绍
优点:
JQueryEasyUI是目前功能比较齐全的一套UI框架,为我们提供了大多数UI控件的使用,如:
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.jsp',onLoad:
function(){
$("div.topMenulia").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();
}elseif(this.id=="cl"){
…………..
}
});
}});
});
functionaddLeftClick(){
$('#main').panel({
onLoad:
function(){
$(".leftMenulia").click(function(){
$(this).addClass("selected");
$(this).parent().siblings().children().removeClass("selected");
});
}
});
};
修改后部分代码
$(document).ready(function(){
$('#header').panel({href:
ctx+'/view/common/header.jsp',onLoad:
function(){
$("div.topMenulia").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");
}elseif(this.id=="cl"){
…………….
}
});
}});
});
functionaddLeftClick(url){
$('#main').panel({
onLoad:
function(){
$(".leftMenulia").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:
' 100%;height: 100%;">' }); 将iframe作为panel的内容面板加载,panel刷新本身需要花费一些时间,调整后直接用iframe,将panel去掉 2、右侧iframe的页面大量使用了easyui的控件,大部分都是以class样式的形式使用 对于easyui的时间控件DateBox和DateTimeBox,IE6在渲染的时候,很耗费时间,导致页面长时间显示空白,最后更换成新的时间控件My97DatePicker,页面响应时间提高3s左右 对于页面上的ComboBox控件,在select组件上加了class="easyui-combobox",页面初始加载的时候就开始渲染这些组件,导致页面响应缓慢,最后将easyui的样式和属性全部去掉,在页面加载完成的方法里再渲染,加载后台数据的同时渲染页面,提高效率。 2.3页面闪烁问题 1)问题现象 在IE6下,点击左侧的菜单,有几个菜单点击后,整个页面会全部刷白,出现如下的情况,短时间的闪烁感觉。 2)问题分析 页面开始使用原生HTML标签select,而且没有用ComboBox组件渲染。 IE6在加载select组件时导致页面闪烁,最后全部用ComboBox组件。 页面上的DataGrid组件的分页栏 这个分页栏的“页面显示数据条数”,也是采用select实现的,而且控件默认是显示该功能的,最后修改在公共js里加入 $.fn.pagination.defaults.showPageList=false; 将控件的默认设置改为不显示。 2.4页面不加载,提示js错误问题 1)问题现象 在IE6下,页面加载是提示js错误,页面停止加载。 2)问题分析 修改前部分代码 $('#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.5DataGrid上自定义按钮的导出不反应问题 1)问题现象 在IE6下,DataGrid的分页自定义按钮上的导出报表功能不起作用,并且后台程序会报错,前台无任何反应。 2)问题分析 修改前代码 $(function(){ $('#custCircuitTable').datagrid({ url: '', pagination: true, rownumbers: true, columns: [[{ field: 'str0', title: '省中心', align: 'center', width: 80, styler: changeColor }]] }); varpager=$('#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框架有了更深的认识,个人使用的一些感受: 遇到问题并且没有好的解决思路的时候,大致浏览一下官方的文档,或许你现在遇到的问题,框架的开发人员都已经给你解决好了,不必劳神了。 遇到问题并且查找了半天没有找到原因的时候,将你的代码缩减到最简单,对比官方给的Demo,找到有哪些差异,逐个排除。 遇到问题实在解决不了的时候,你需要深入理解框架的实现原理,对每一个控件的工作方式、控件处理数据的逻辑大致了解,查看控件最终在页面的展示形式,判断自己的数据是否符合要求。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- EasyUI 兼容 IE 方法