[原]DWZ下ajax后台交互后的分頁刷新
2013-5-1閱讀1747 評論1
之前做的幾個項目，用上了DWZ這個UI框架作為管理后台的界面，覺得還是不錯的。個人覺得有點遺憾的是這個框架的整體感覺不夠企業化，缺少穩重的感覺。
在開發過程中，碰到了一些問題，這里跟大家分享一下。
DWZ版本：
DWZ RIA 1.3 Final
說明：因為之前做過一些自定義，是直接將 dwz.min.js 改成 dwz.newgxu.js ，這樣做對整個框架修改過大，造成以后更新與維護的各種不便。所以，現在作的修改是以覆蓋的方式進行。
問題描述：
在一些分頁的NAV中，進行 ajaxToDo 或者 彈出Dialog的validateCallback 后，服務器返回的json為：
{"statusCode":"200", "message":"權限刪除成功", "navTabId":"permission_list","rel":"", "callbackType":"","forwardUrl":"permission/list"}
這里，會將整個NAV刷新，但我們想要的只是刷新當前頁。
下面就這個問題作一些修正。
首先說一下DWZ與后台交與的形式：
1. 通過 <a target="ajaxToDo" href=""></a>
這里點擊這個標簽會向后台post請求，地址就是 href 的值，ajax的回調函數默認是
navTabAjaxDone
2. 通過 target="dialog"
如增加一個新用戶，以dialog的方式彈出輸入界面，這樣寫：
<a class="BUTTON" href="user/add" width="300" height="250" target="dialog"
rel="rank_create" fresh="false">添加用戶</a>
彈出內容：
<form name="form1" method="post" action="user/add" onsubmit=
"return validateCallback(this, dialogAjaxDone);"></form>
提交這個表單后，回調函數為 dialogAjaxDone。
再說說DWZ分頁的實現：
<div class="pageHeader RIGHT">
<form id="pagerForm" name="permission_list_pageForm" style="display:none;"
action="permission/list" method="get" onsubmit="returnnavTabSearch(this);">
<input type="hidden" name="page" value="${model.page}"/>
</form>
</div>
<div class="pageContent">
<table class="table" width="100%" border="1" layoutH="85" align="center"
cellspacing="0" bordercolor="#999999" style="border-collapse:collapse">
<thead>
<tr>
<th width="3%">ID</th>
<th width="6%">應用名稱</th>
<th width="10%">名稱</th>
<th width="8%">模塊名</th>
<th width="8%">方法名</th>
<th width="30%">說明</th>
<th width="8%">添加人</th>
<th width="15%">添加時間</th>
<th width="10%">操作</th>
</tr>
</thead>
</table>
<div class="panelBar">
<div class="pages">
<span>共${model.totalCount}條</span>
</div>
<div class="pagination" targetType="navTab" totalCount=
"${model.totalCount}" numPerPage="${model.pageSize}"
pageNumShown="16" currentPage="${model.page}"></div>
</div>
</div>
說明：
可以按照上面的div分層格式寫，id="pagerForm" 這個一定需要。
好了，現在開始實現刷新當前分頁。先作一些准備工作：
給id="pagerForm" 增加一個唯一的名稱，格式：當前{navTabId}_pageForm。
在這個Form中的 name="page" 給一個值，這個值就是當前的頁碼，這樣方便分頁刷新。
然后將下面兩個方法加入到 總的頁面中，一般是 加載dwz框架的頁面，如index.html：
/**
* 彈出窗口編輯提交后，異步處理函數，在這里會刷新當前的分頁table的值
*
* 思路：
手動提交 pagerForm 這個表單
*
* 確保 id=pagerForm 的表單存在，參考：
* ====================================================================================
* <form id="pagerForm" style="display:none;"
* action="permission/list" method="get" onsubmit="return navTabSearch(this);">
* <input type="hidden" name="page" value="1" /><!--【必須】value=1可以寫死-->
* </form>
* ------------------------------------------------------------------------------------
* 修改action為相應的地址即可
* ====================================================================================
*
* 3.修改彈出的dialog回調函數的聲明：
* <form name="form1" method="post" action="permission/add"
* onsubmit="return validateCallback(this, dialogAjaxDone_fresh);">
*
* 將原來的 dialogAjaxDone 改成下面的函數名即可。
*
* @param {Object} json
*/
function dialogAjaxDone_fresh(json){
DWZ.ajaxDone(json);
if(json.statusCode==DWZ.statusCode.ok){
$("form[name="+json.navTabId+"_pageForm]").submit();
$.pdialog.closeCurrent();
}
}
/**
* 重寫 navTabAjaxDone方法
*
* @param {Object} json
*/
function navTabAjaxDone(json){
DWZ.ajaxDone(json);
if(json.statusCode==DWZ.statusCode.ok){
if(json.navTabId){
//先判斷當前的nav是否有 pagerForm，
//有，就刷新這個nav 中的分頁控件
var $pageForm = $("form[name="+json.navTabId+"_pageForm]");
if($pageForm){
console.log("刷新分頁");
$pageForm.submit();
}else{
console.log("刷新本Nav");
navTab.reloadFlag(json.navTabId);
}
}else{
navTabPageBreak({},json.rel);
}
if("closeCurrent"==json.callbackType){
setTimeout(function(){navTab.closeCurrentTab();},100);
}else if("forward"==json.callbackType){
navTab.reload(json.forwardUrl);
}
}
}
然后修改dialog中的回調函數 為我們的新加的函數：
<form name="form1" method="post" action="user/add" onsubmit="return
validateCallback(this, dialogAjaxDone_fresh);"></form>
對於 ajaxToDo 形式的交互，不需要修改。
至此，完成。