DWZ (JUI) 教程 navTabPageBreak 流程分析

   最近工作很忙，博客一直没有更新，有些朋友发的邮件也没有来得及回复，在这里表示一下歉意。

   前一阵子有朋友问道 navTabPageBreak 查询参数无法传递的问题，只有一张图片，我很难找到具体原因，在这里我把整个流程分析一下，这样自己找找问题所在，

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

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

   先说一下流程

   

  

 

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

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

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

 

/**
 * 处理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;
}