最近工作很忙,博客一直没有更新,有些朋友发的邮件也没有来得及回复,在这里表示一下歉意。
前一阵子有朋友问道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;
- }