快捷導(dǎo)航

在UpdatePanel內(nèi)jquery easyui效果失效的解決方法

更新時(shí)間：2010年04月11日 21:56:14 作者：

項(xiàng)目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好處自然是頁(yè)面不刷新，用戶感覺(jué)比較好，同時(shí)也減少了一部分?jǐn)?shù)據(jù)量的傳輸。

使用easyui 的好處除了界面還不錯(cuò)之外，也因?yàn)槭褂梅奖恪?

 
<div class="easyui-tabs" style="width: 300px"> 
<div title="搜索"> ...</div> 
<div title="選擇">...</div> 
<div title="返回">...</div> 
</div> 

只要給他定義個(gè)相應(yīng)的class 就能實(shí)現(xiàn)各種效果。

但是，把它放在updatepanel里面，且不是首次就讓他顯示出來(lái)的話就出故障了。

復(fù)制代碼代碼如下:

 
<asp:MultiView ID="MultiView1" runat="server"> 
<asp:View ID="View1" runat="server"> 
<div class="easyui-tabs" style="width: 300px"> 
<div title="搜索"> 
...</div> 
<div title="選擇"> 
...</div> 
<div title="返回"> 
...</div> 
</div> 
</asp:View> 
<asp:View ID="View2" runat="server"> 
<div class="easyui-tabs" style="width: 300px"> 
<div title="搜索"> 
...</div> 
<div title="選擇"> 
...</div> 
<div title="返回"> 
...</div> 
</div> 
</asp:View> 
</asp:MultiView> 

在multipleView里面定義兩個(gè)一樣的view，內(nèi)容也一樣。并把 MultiView1放到updatepanel里面。

然后設(shè)置他顯示第一個(gè)view

復(fù)制代碼代碼如下:

MultiView1.ActiveViewIndex =0;

瀏覽一下。顯示正常。但是當(dāng)我們改變view的顯示時(shí)，例如把上面的改成 MultiView1.ActiveViewIndex =1；那么第二個(gè)veiw的效果就全無(wú)了。

到j(luò)query.easyui.min.js 里找原因?？吹搅诉@么一句

復(fù)制代碼代碼如下:

 
r=$(".easyui-tabs",_1ec); 
if(r.length){ 
    r.tabs(); 

大概就是在網(wǎng)頁(yè)加載完后，尋找class定義為easyui-tabs 的層。并把效果附加給他。

那么可以想象，當(dāng)頁(yè)面加載時(shí)，我們顯示的是第一個(gè)view，那么js就找到view里的層，并賦予其效果。
然后我們?cè)趗pdatepanel里更新了顯示的view，內(nèi)容雖然切換到了第二個(gè)view了。但是頁(yè)面沒(méi)有重新加載，上面的js代碼沒(méi)有對(duì)新的view執(zhí)行改變。
所以決策就是當(dāng)updatepanel回發(fā)后重新執(zhí)行js代碼。
在頁(yè)面定義一個(gè)重新綁定的函數(shù)。

復(fù)制代碼代碼如下:

 
function EndRequestHandler() { 
$(".easyui-tabs").tabs(); 
} 

再定義一個(gè)事件。

復(fù)制代碼代碼如下:

 
function reload() { 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
} 

add_endRequest
PageRequestManager 類是一個(gè)管理瀏覽器中服務(wù)器 UpdatePanel 控件的部分頁(yè)更新。此外，還定義一些屬性、事件和方法，用以通過(guò)客戶端腳本對(duì)網(wǎng)頁(yè)進(jìn)行自定義。通過(guò)調(diào)用 getInstance 方法來(lái)得到 PageRequestManager 類的實(shí)例。然后通過(guò) add_endRequest 方法來(lái)綁定 endRequest 事件（異步回發(fā)完成，并且控制權(quán)返回到瀏覽器之后引發(fā)）。這樣以后，每次updatepanel發(fā)生回調(diào)后，都會(huì)觸發(fā)EndRequestHandler（）函數(shù)。重新綁定一次效果。$(document).ready(function() { reload(); })
失效問(wèn)題就解決了。

您可能感興趣的文章: