[原]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 形式的交互，不需要修改。
至此，完成。