DWZ (JUI) 應用實例（三）：修改源碼，實現自動刷新當前層

原創

2020-02-21 09:38

前文DWZ (JUI) 教程（二）：處理信息回饋的通用規範中講述，將返回信息的處理封裝在AjaxObject對象中，例如UserAction中的addUser方法執行成功後，outMsg(AjaxObject.newOk("添加用戶成功！").setNavTabId("userListview").toString());表示將在tabId爲userListview的tab層提示“添加成功”。

可見在Action中需要設置userListview參數，也就是指明返回數據的目標tab。這樣的設計沒問題，但是會產生兩個問題：

實際應用中，我們操作的大都是當前的tab，如果每次向當前tab返回數據時都指定tabId，未免有些過於形式化。

如果頁面左側樹形菜單是動態的，是從數據庫中讀取的，並且tabId屬性值可以修改，那麼outMsg(AjaxObject.newOk("添加用戶成功！").setNavTabId("userListview").toString())顯然不能滿足需求了。

通過修改dwz源碼，使得向action返回數據同時刷新當前層，從而無需指定tabId，

以添加用戶爲例：

原始例子

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/page/common/common.jsp"%>
 
<div class="pageContent">
<form method="post" action="${contextPath}/user/addUserAction" class="pageForm required-validate" οnsubmit="return validateCallback(this, dialogAjaxDone)">
<div class="pageFormContent" layoutH="58">
<p>
<label>登錄名稱：</label>
<input type="text" name="user.username" class="required" size="20" maxlength="32"/>
</p>
<p>
<label>登錄密碼：</label>
<input type="text" name="user.password" class="required" size="20" minlength="6" maxlength="20" value="123456" alt="字母、數字、下劃線 6-20位"/>
<span class="info">  默認：123456</span>
</p>
</div>
 
<div class="formBar">
<ul>
<li><div class="button"><div class="buttonContent"><button type="submit">確定</button></div></div></li>
</ul>
</div>
</form>
</div>

οnsubmit="return validateCallback(this, dialogAjaxDone)"，表示註冊回調函數dialogAjaxDone，當執行action完畢後會執行該js函數。

action中，需要指定tabId纔會刷新頁面，outMsg(AjaxObject.newOk("添加用戶成功！").setNavTabId("userListview").toString());

將dialogAjaxDone換成自定義dialogReloadNavTab。

action中，無需再指定tabId就會刷新當前層，outMsg(AjaxObject.newOk("添加用戶成功！").toString());

dialogReloadNavTab函數實現：

/**
 * 得到當前活動的navtab
 * @returns
 */
function getCurrentNavtab(){
return $("ul.navTab-tab li.selected");
}
 
/**
 * 自動刷新當前活動的navTab
 * @param json
 */
function dialogReloadNavTab(json){
DWZ.ajaxDone(json);
var tabId = getCurrentNavtab().attr("tabid");
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId || tabId!=null){
navTab.reload(json.forwardUrl, {navTabId: json.navTabId});
} else if (json.rel) {
var $pagerForm = $("#pagerForm", navTab.getCurrentPanel());
var args = $pagerForm.size()>0 ? $pagerForm.serializeArray() : {}
navTabPageBreak(args, json.rel);
}
if ("closeCurrent" == json.callbackType) {
$.pdialog.closeCurrent();
}
}
}

想要看懂web框架，甚至自己設計，js和jquery是基礎，推薦學習w3cschool。