DWZ (JUI) 應用執行個體（三）：修改源碼，實現自動重新整理當前層

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




 




 

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

1. 實際應用中，我們操作的大都是當前的tab，如果每次向當前tab返回資料時都指定tabId，未免有些過於形式化。
1. 如果頁面左側樹形菜單是動態，是從資料庫中讀取的，並且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" onsubmit="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>




onsubmit="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。