DWZ (JUI) 应用实例（三）：修改源码，实现自动刷新当前层

• 前文DWZ (JUI) 教程（二）：处理信息回馈的通用规范中讲述，将返回信息的处理封装在AjaxObject对象中，例如UserAction中的addUser方法执行成功后，outMsg(AjaxObject.newOk("添加用户成功！").setNavTabId("userListview").toString());表示将在tabId为userListview的tab层提示“添加成功”。

  
  

   

  
  

   

  可见在Action中需要设置userListview参数，也就是指明返回数据的目标tab。这样的设计没问题，但是会产生两个问题：

  1. 实际应用中，我们操作的大都是当前的tab，如果每次向当前tab返回数据时都指定tabId，未免有些过于形式化。
  2. 如果页面左侧树形菜单是动态的，是从数据库中读取的，并且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。