EasyUI兼容IE方法

1、EasyUI 兼容 IE6 的方法總結(jié)1. 背景1.1 項(xiàng)目介紹XX服務(wù)平臺從 7 月低開始框架搭建，前端UI框架確定使用目前功能比較完善的Jquery EasyUI（沒有考慮到客戶方目前使用的瀏覽器大部分都是IE6，項(xiàng)目設(shè)計(jì)初期的不嚴(yán)謹(jǐn)）。11 初基本功能開發(fā)完成，期間一直致力于功能的實(shí)現(xiàn)和數(shù)據(jù)的一致性的核查，并沒有太多關(guān)注瀏覽器的兼容性和性能問題。經(jīng)過在客戶現(xiàn)場幾次演示的結(jié)果，暴露出嚴(yán)重的性能問題和兼容性問題，在IE6 下，系統(tǒng)基本不能運(yùn)行。于是開始著手調(diào)整這些問題。1.2 框架介紹優(yōu)點(diǎn)：JQuery EasyUI 是目前功能比較齊全的一套 UI 框架，為我們提供了大多數(shù)UI控件的使用，如

2、：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等，方便開發(fā)人員使用，提高開發(fā)效率，正是基于這些考慮，項(xiàng)目設(shè)計(jì)的時(shí)候決定使用該框架。缺點(diǎn)：界面兼容程度不夠，不過大部分都發(fā)生在IE6下，在 IE7+ 、FF等瀏覽器中顯示正常。2. 詳細(xì)分析2.1 頁面重復(fù)加載問題1) 問題現(xiàn)象點(diǎn)擊左側(cè)的菜單，右側(cè)頁面被加載了兩次。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); ;代碼實(shí)現(xiàn)的功能是點(diǎn)擊主菜單的時(shí)候，刷新下面的 panel 控件，加載新頁面，并且默認(rèn)選擇左側(cè)菜單的第一個(gè)。修改前的代碼是先刷新頁面，再添加 onLoad 監(jiān)聽事件，導(dǎo)致panel 刷新兩次，頁面重復(fù)加載，修改后先添加 onLoad 監(jiān)聽事件，再加載頁面。2.2 加載速度慢的問題1) 問題現(xiàn)象在 IE6 下，點(diǎn)擊左側(cè)的菜單，要5s 左右才開始刷新右側(cè)頁面，出現(xiàn)右邊長

8、時(shí)間空白。2) 問題分析1、頁面開始使用$('#myPanel').panel(fit:true,content:'<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>');將 iframe 作為 panel的內(nèi)容面板加載，panel 刷新本身需要花費(fèi)一些時(shí)間，調(diào)整后直接用 iframe，將 panel 去

9、掉2、右側(cè)iframe 的頁面大量使用了easyui 的控件，大部分都是以class 樣式的形式使用對于 easyui 的時(shí)間控件DateBox 和DateTimeBox，IE6 在渲染的時(shí)候，很耗費(fèi)時(shí)間，導(dǎo)致頁面長時(shí)間顯示空白，最后更換成新的時(shí)間控件My97DatePicker ，頁面響應(yīng)時(shí)間提高 3s 左右對于頁面上的 ComboBox 控件，在 select 組件上加了 class="easyui-combobox"，頁面初始加載的時(shí)候就開始渲染這些組件，導(dǎo)致頁面響應(yīng)緩慢，最后將easyui 的樣式和屬性全部去掉，在頁面加載完成的方法里再渲染，加載后臺數(shù)據(jù)的同時(shí)渲染頁

10、面，提高效率。2.3 頁面閃爍問題1) 問題現(xiàn)象在 IE6 下，點(diǎn)擊左側(cè)的菜單，有幾個(gè)菜單點(diǎn)擊后，整個(gè)頁面會全部刷白，出現(xiàn)如下的情況，短時(shí)間的閃爍感覺。2) 問題分析頁面開始使用原生 HTML 標(biāo)簽 select ，而且沒有用 ComboBox 組件渲染。IE6 在加載 select 組件時(shí)導(dǎo)致頁面閃爍，最后全部用 ComboBox 組件。頁面上的DataGrid 組件的分頁欄這個(gè)分頁欄的“頁面顯示數(shù)據(jù)條數(shù)”，也是采用 select 實(shí)現(xiàn)的，而且控件默認(rèn)是顯示該功能的，最后修改在公共 js 里加入 $.fn.pagination.defaults.showPageList = false;將控

11、件的默認(rèn)設(shè)置改為不顯示。2.4 頁面不加載，提示 js 錯(cuò)誤問題1) 問題現(xiàn)象在 IE6 下，頁面加載是提示js 錯(cuò)誤，頁面停止加載。2) 問題分析 修改前部分代碼$('#gridTableB').datagrid( url:'',method : 'post',loadMsg : '數(shù)據(jù)載入中，請稍等.',pagination : true,rownumbers : true,columns : field : 'gesBsmAlarm.occurOrgidName',title : '區(qū)域',w

12、idth : 35,sortable : true, /請注意，引起錯(cuò)誤的位置，多了一個(gè) 逗號, field : 'gesBsmAlarm.equipModel',title : '告警類型',width : 60,sortable : true );Easyui 的 DataGrid 控件的屬性最后一項(xiàng)，不能寫一個(gè) “,”，這在 IE7+ 和FF 等瀏覽器下沒有問題，在 IE6 下報(bào)js 錯(cuò)誤。2.5 DataGrid 上自定義按鈕的導(dǎo)出不反應(yīng)問題1) 問題現(xiàn)象在 IE6 下， DataGrid 的分頁自定義按鈕上的導(dǎo)出報(bào)表功能不起作用，并且后臺程序會報(bào)錯(cuò)，前

13、臺無任何反應(yīng)。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 的分頁控件的自定義按鈕解析時(shí)，解析成下圖的形式其中的 a 標(biāo)簽的 href="javascript:void(0)"，在 IE6 下，當(dāng)點(diǎn)擊這個(gè)鏈接時(shí)，IE6中會先執(zhí)行a 中的javascript:void(0) ，之后IE6 認(rèn)為請求已經(jīng)結(jié)束，其實(shí)真正的請求在 exportExcel(); 方法里執(zhí)行了，并且請求了后臺的數(shù)據(jù)，后臺執(zhí)行完成之后，返回?cái)?shù)據(jù)到前臺，發(fā)現(xiàn)請求已經(jīng)被關(guān)閉，然后后臺就報(bào)錯(cuò)了。最后代碼修改后全部不再采用DataGrid的自定義分頁按鈕，用 LinkButton 實(shí)現(xiàn)，并給 href=”#”。2.6 依舊存在的問題1) 問題現(xiàn)象在 IE6 下，快速定位資源客戶樹上的客戶，速度很慢2) 問題分析IE6 執(zhí)行js 的選擇元素和創(chuàng)建對象的方法速度很慢，但是在樹形結(jié)構(gòu)中，查找一個(gè)節(jié)點(diǎn)的時(shí)候需要大量選擇元素和創(chuàng)建對象，導(dǎo)致方法執(zhí)行緩慢，目前尚未找到好的解決方案。3. 總結(jié)通過端到端系統(tǒng)的實(shí)戰(zhàn)，對 easyui