DWZ (JUI) 教程 navTabPageBreak 流程分析

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

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

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

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

先说一下流程

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

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

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

/**
*处理navTab中的分页和排序
*@paramargs{pageNum:"n",numPerPage:"n",orderField:"xxx",orderDirection:""}
*@paramrel：可选用于局部刷新divid号
*/
functionnavTabPageBreak(args,rel){
//实质上调用的dwzPageBreak方法，dwzPageBreak是对navTab和dialog通用一个方法
dwzPageBreak({targetType:"navTab",rel:rel,data:args});
}

/**
*处理navTab中的分页和排序
*targetType:navTab或dialog
*rel:可选用于局部刷新divid号
*data:pagerForm参数{pageNum:"n",numPerPage:"n",orderField:"xxx",orderDirection:""}
*callback:加载完成回调函数
*/

//这个方法是重点
functiondwzPageBreak(options){
//这里设置一些默认是属性
varop=$.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下面会重点讲解
varform=_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下面会重点讲解
varform=_getPagerForm($parent,op.data);

//获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的
varparams=$(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:""}
*@paramStringformId分页表单选择器，非必填项默认值是"pagerForm"
*/

//dwzPageBreak方法调用这个方法
function_getPagerForm($parent,args){
//获取当前页面下查询Form节点
//#pagerFormId名字很重要如果传递不了参数，可以检查一下ID名称
varform=$("#pagerForm",$parent).get(0);
if(form){
//在这里会把你传递的参数附上。
if(args["pageNum"])form[DWZ.pageInfo.pageNum].value=args["pageNum"];
//<selectclass=""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"];
}

returnform;
}