DWZ下ajax后台交互后的分页刷新

之前做的几个项目,用上了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="return navTabSearch(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 形式的交互,不需要修改。
 
至此,完成。
 
 
原文地址:https://www.cnblogs.com/nerve/p/3185429.html