• 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 形式的交互,不需要修改。
     
    至此,完成。
     
     
  • 相关阅读:
    用户场景分析
    人月神话阅读笔记03
    钢镚儿开发的最后一天
    钢镚儿开发的第九天
    4.25第10周周总结
    5号总结
    4号总结(3)
    4号总结(2)生成apk
    4号总结(1)
    3号寒假总结
  • 原文地址:https://www.cnblogs.com/nerve/p/3185429.html
Copyright © 2020-2023  润新知