EasyUI 兼容 IE6 方法總結.doc

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) 問題分析

一、頁面開始使用

$('#myPanel').panel({

fit:true,

content:'<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'

});

將 iframe 做爲 panel的內容面板加載，panel 刷新自己須要花費一些時間，調整後直接用 iframe，將 panel 去掉

二、右側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遇到問題實在解決不了的時候，你須要深刻理解框架的實現原理，對每個控件的工做方式、控件處理數據的邏輯大體瞭解，查看控件最終在頁面的展現形式，判斷本身的數據是否符合要求。