作者:
beauty9235
鏈接：
http://beauty9235.javaeye.com/blog/229632
發(fā)表時(shí)間: 2008年07月04日
聲明：本文系JavaEye網(wǎng)站發(fā)布的原創(chuàng)博客文章，未經(jīng)作者書面許可，嚴(yán)禁任何網(wǎng)站轉(zhuǎn)載本文，否則必將追究法律責(zé)任！
dwr動(dòng)態(tài)載入小結(jié)
筆記在實(shí)際開發(fā)中用到dwr框架，一直以來，常為加載中提示用戶等待這問題困擾，經(jīng)筆者研究，摸索出一個(gè)切實(shí)可行的方案，供大家參考。
實(shí)例如下:
<a style="cursor:hand" onclick="changeStatus(this);Test.invoke('${parameters}','${pageId}',callBack);"><img src='/icon.gif'></a>
函數(shù)說明:
changeStatus我們將用來改變提示狀態(tài)值
Test類的invoke函數(shù)將觸發(fā)從臺(tái)數(shù)據(jù)庫(kù)取出值
然后通過回調(diào)函數(shù)callBack負(fù)責(zé)在頁(yè)面顯示出來
頁(yè)面配置
<script type='text/javascript' src='/dwr/interface/Test.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
<script type='text/javascript' src="/js/prototype-1.4.0.js"></script>
dwr.xml
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Test">
<param name="class" value="pakage.Test"/>
</create>
<convert converter="bean" match="pakage.Test"/>
</allow>
</dwr>
回調(diào)函數(shù)
var callBack=function(data){
var pageId=data.pageId;
var list=data.listEntityBean;
if ($(pageId).style.display == "none") {
$(pageId).style.display="block";
var htmlStr = "";
for (var i = 0; i < list.length; i++) {
htmlStr +=...//這里是將list中的值取出來給一個(gè)字符串
}
$(pageId).innerHTML = htmlStr;
return;
}
$(pageId).style.display="none";
}
pakage.Test類
public class Test {
private String pageId;
private List list;
public String getPageId() {
return pageId;
}
public void setPageId(String pageId) {
this.pageId = pageId;
}
public String getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
static Log log= LogFactory.getLog(Test.class);
public void invoke(String parameter,String pageId){
this.setPageId(pageId);
this.list=...//這里根據(jù)參數(shù)從數(shù)據(jù)庫(kù)里取出值來
return this;
}
至些我們完成的dwr的編寫。
function changeStatus(obj){
var htmlStr = "";
var oPopup = window.createPopup();
DWREngine.setPreHook(function() { //這是正在加載的代碼
htmlStr = "<img src=\"/loading.gif\">";
obj.innerHTML = htmlStr;//這里是改變傳入對(duì)象的值，是dwr正在加載時(shí)的提示,如loading,我這里是用的是圖片
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = "<img src='/admin/images/spinner.gif'>";
oPopup.show((Math.abs(Math.round((document.body.clientWidth-50) / 2))), Math.abs(Math.round((document.body.clientHeight-50)/ 2)), 100, 100, document.body);
});
DWREngine.setPostHook(function() { //這是加載完成的代碼
htmlStr = "<img src=\"/loadok.gif\">";//這里是改變傳入對(duì)象的值，是dwr加載時(shí)完成的提示,如load ok,我這里是用的是圖片
obj.innerHTML = htmlStr;
oPopup.hide();
});
}
以上代碼，是我在項(xiàng)目中抽取出來的一部份。
小說明一下：
var oPopup = window.createPopup();這個(gè)函數(shù)用于創(chuàng)建浮動(dòng)頁(yè)面的loading載入提示，加載完成后將對(duì)象進(jìn)行oPopup隱藏處理oPopup.hide();
如果不須要，changeStatus這個(gè)函數(shù)完全可以這樣寫
function changeStatus(obj){
DWREngine.setPreHook(function() { //這是正在加載的代碼
obj.innerHTML = "<img src=\"/loading.gif\">";//這里是改變傳入對(duì)象的值，是dwr正在加載時(shí)的提示,如loading,我這里是用的是圖片
});
DWREngine.setPostHook(function() { //這是加載完成的代碼
obj.innerHTML = "<img src=\"/loadok.gif\">";//這里是改變傳入對(duì)象的值，是dwr加載時(shí)完成的提示,如load ok,我這里是用的是圖片
});
}
至此我們完美的完成了dwr加載時(shí)的提示問題，這樣也使用戶體更強(qiáng)，更具人性化.
本文的討論也很精彩，瀏覽討論>>
JavaEye推薦