DWZ (JUI) 应用实例(三):修改源码,实现自动刷新当前层

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


     DWZ (JUI) 应用实例(三):修改源码,实现自动刷新当前层_第1张图片

    DWZ (JUI) 应用实例(三):修改源码,实现自动刷新当前层_第2张图片

     

    可见在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框架,甚至自己设计,jsjquery是基础,推荐学习w3cschool

你可能感兴趣的:(dwz,web框架)