AJAX非同步擷取HTML之後 JQuery EasyUI 的介面重繪的解決辦法

當AJAX非同步擷取了HTML代碼之後，這一段代碼是包含JQuery EasyUI 的屬性和樣式的，這時這些屬性和樣式並不會生效。這裡說說解決方案

我們先來瞭解頁面在重新整理或開啟時JQuery EasyUI都幹了些什麼：

在載入完HTML的時候，JQuery EasyUI 會找class=“easyui-xxxx”的樣式來初始化JQuery EasyUI 控制項，搜尋JQuery EasyUI 混淆之後的原始碼，找到這麼一段：

(function($){
$.parser={auto:true,onComplete:function(_142){
},plugins:["linkbutton","menu","menubutton","splitbutton","tree","combobox","combotree","numberbox","validatebox","numberspinner","timespinner","calendar","datebox","layout","panel","datagrid","tabs","accordion","window","dialog"],parse:function(_143){
var aa=[];
for(var i=0;i<$.parser.plugins.length;i++){
var name=$.parser.plugins[i];
var r=$(".easyui-"+name,_143);
if(r.length){
if(r[name]){
r[name]();
}else{
aa.push({name:name,jq:r});
}
}
}
if(aa.length&&window.easyloader){
var _144=[];
for(var i=0;i<aa.length;i++){
_144.push(aa[i].name);
}
easyloader.load(_144,function(){
for(var i=0;i<aa.length;i++){
var name=aa[i].name;
var jq=aa[i].jq;
jq[name]();
}
$.parser.onComplete.call($.parser,_143);
});
}else{
$.parser.onComplete.call($.parser,_143);
}
}};
$(function(){
if(!window.easyloader&&$.parser.auto){
$.parser.parse();
}
});
})(jQuery);

 

當看完之後$.parser.parse();這一句不就是重繪JQuery EasyUI 控制項的麼。當執行這一句話的時候JQuery EasyUI 會對整個頁面的DOM進行解析，效率是比較慢的。當然我們AJAX非同步擷取的僅僅是一段HTML，沒有必要對整個頁面進行解析。

當我們非同步擷取來的HTML放入一個容器裡，比如這樣

$('#xxxx').html(非同步擷取回來的內容) ，我們在解析這一段非同步擷取回來的HTML中的JQuery EasyUI控制項時，可以這樣做：

$.parser.parse($('#xxxx'));

這樣就只解析$('#xxxx')內部的HTML中的JQuery EasyUI控制項。

 

此測試已經通過，此方法很可靠。