DWZ (JUI) 教程 navTabPageBreak 流程分析

最近工作很忙，博客一直没有更新，有些朋友发的邮件也没有来得及回复，在这里表示一下歉意。
   前一阵子有朋友问道 navTabPageBreak 查询参数无法传递的问题，只有一张图片，我很难找到具体原因，在这里我把整个流程分析一下，这样自己找找问题所在，

也希望能给其他的朋友带来帮助。

   我以表格控件的 分页显示数量为例。dwz-ria-1.4.3

   先说一下流程

   

  


 


  1 分页的Combox控件的 onchange事件 触发 navTabPageBreak

  2 navTabPageBreak 实质上是调用的 dwzPageBreak 方法

  这里我就重点说明一下dwzPageBreak方法

 

[html]
view plaincopy

/**  
 * 处理navTab中的分页和排序  
 * @param args {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}  
 * @param rel： 可选 用于局部刷新div id号  
 */  
function navTabPageBreak(args, rel){  
        //实质上调用的 dwzPageBreak 方法，dwzPageBreak 是对navTab和dialog通用一个方法  
    dwzPageBreak({targetType:"navTab", rel:rel, data:args});  
}  
  
/**  
 * 处理navTab中的分页和排序  
 * targetType: navTab 或 dialog  
 * rel: 可选 用于局部刷新div id号  
 * data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}  
 * callback: 加载完成回调函数  
 */  
  
 //这个方法是重点  
 function dwzPageBreak(options){  
        //这里设置一些默认是属性  
    var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);  
        //获取默认的父容器，一般就是当前的dialog和当的navTab  
        var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();  
        //这里是局部的刷新， 流程就是通过Ajax请求获取到新的html片段，替换掉 指定的id (op.rel)节点，然后从新格式化布局。  
    if (op.rel) {  
        var $box = $parent.find("#" + op.rel);  
                //获取当前页面的查询form 下面会重点讲解  
        var form = _getPagerForm($box, op.data);  
        if (form) {  
                        //获取新的html片段，替换掉原始的。  
            $box.ajaxUrl({                                         //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的   
                type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){  
                                        //重新格式化布局  
                    $box.find("[layoutH]").layoutH();  
                }  
            });  
        }  
         //刷新整个 navTab、或者 dialog  
         } else {  
             //获取当前页面的查询form 下面会重点讲解  
             var form = _getPagerForm($parent, op.data);  
              
            //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的   
            var params = $(form).serializeArray();  
            //通过各个reload方法可以刷新  
            if (op.targetType == "dialog") {  
                if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});  
            }else{  
               if (form)  navTab.reload($(form).attr("action"), {data: params, callback: op.callback});  
            }  
         }  
}  
  
/**  
 *   
 * @param {Object} args {pageNum:"",numPerPage:"",orderField:"",orderDirection:""}  
 * @param String formId 分页表单选择器，非必填项默认值是 "pagerForm"  
 */  
  
//dwzPageBreak 方法调用这个方法   
function _getPagerForm($parent, args) {  
         //获取当前页面下查询Form节点  
         //#pagerForm Id 名字很重要 如果传递不了参数，可以检查一下 ID 名称         
        var form = $("#pagerForm", $parent).get(0);  
    if (form) {  
                //在这里会把你传递的参数附上。  
        if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];  
                //<select class="" onchange="navTabPageBreak({numPerPage:this.value})" name="numPerPage">   
                //在这里附上值，从而达到你切换数量时刷新页面的效果  
        if (args["numPerPage"]) form[DWZ.pageInfo.numPerPage].value = args["numPerPage"];  
        if (args["orderField"]) form[DWZ.pageInfo.orderField].value = args["orderField"];  
        if (args["orderDirection"] && form[DWZ.pageInfo.orderDirection]) form[DWZ.pageInfo.orderDirection].value = args["orderDirection"];  
    }  
      
    return form;  
}