DWZ (JUI) 教程 navTabPageBreak 流程分析

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

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

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

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

   先说一下流程

   

  

 

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

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

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

 

[html] view plain copy

1. /**  
2.  * 处理navTab中的分页和排序  
3.  * @param args {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}  
4.  * @param rel： 可选 用于局部刷新div id号  
5.  */  
6. function navTabPageBreak(args, rel){  
7.         //实质上调用的 dwzPageBreak 方法，dwzPageBreak 是对navTab和dialog通用一个方法  
8.     dwzPageBreak({targetType:"navTab", rel:rel, data:args});  
9. }  
10.   
11. /**  
12.  * 处理navTab中的分页和排序  
13.  * targetType: navTab 或 dialog  
14.  * rel: 可选 用于局部刷新div id号  
15.  * data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}  
16.  * callback: 加载完成回调函数  
17.  */  
18.   
19.  //这个方法是重点  
20.  function dwzPageBreak(options){  
21.         //这里设置一些默认是属性  
22.     var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);  
23.         //获取默认的父容器，一般就是当前的dialog和当的navTab  
24.         var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();  
25.         //这里是局部的刷新， 流程就是通过Ajax请求获取到新的html片段，替换掉 指定的id (op.rel)节点，然后从新格式化布局。  
26.     if (op.rel) {  
27.         var $box = $parent.find("#" + op.rel);  
28.                 //获取当前页面的查询form 下面会重点讲解  
29.         var form = _getPagerForm($box, op.data);  
30.         if (form) {  
31.                         //获取新的html片段，替换掉原始的。  
32.             $box.ajaxUrl({                                         //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的   
33.                 type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){  
34.                                         //重新格式化布局  
35.                     $box.find("[layoutH]").layoutH();  
36.                 }  
37.             });  
38.         }  
39.          //刷新整个 navTab、或者 dialog  
40.          } else {  
41.              //获取当前页面的查询form 下面会重点讲解  
42.              var form = _getPagerForm($parent, op.data);  
43.               
44.             //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的   
45.             var params = $(form).serializeArray();  
46.             //通过各个reload方法可以刷新  
47.             if (op.targetType == "dialog") {  
48.                 if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});  
49.             }else{  
50.                if (form)  navTab.reload($(form).attr("action"), {data: params, callback: op.callback});  
51.             }  
52.          }  
53. }  
54.   
55. /**  
56.  *   
57.  * @param {Object} args {pageNum:"",numPerPage:"",orderField:"",orderDirection:""}  
58.  * @param String formId 分页表单选择器，非必填项默认值是 "pagerForm"  
59.  */  
60.   
61. //dwzPageBreak 方法调用这个方法   
62. function _getPagerForm($parent, args) {  
63.          //获取当前页面下查询Form节点  
64.          //#pagerForm Id 名字很重要 如果传递不了参数，可以检查一下 ID 名称         
65.         var form = $("#pagerForm", $parent).get(0);  
66.     if (form) {  
67.                 //在这里会把你传递的参数附上。  
68.         if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];  
69.                 //<select class="" onchange="navTabPageBreak({numPerPage:this.value})" name="numPerPage">   
70.                 //在这里附上值，从而达到你切换数量时刷新页面的效果  
71.         if (args["numPerPage"]) form[DWZ.pageInfo.numPerPage].value = args["numPerPage"];  
72.         if (args["orderField"]) form[DWZ.pageInfo.orderField].value = args["orderField"];  
73.         if (args["orderDirection"] && form[DWZ.pageInfo.orderDirection]) form[DWZ.pageInfo.orderDirection].value = args["orderDirection"];  
74.     }  
75.       
76.     return form;  
77. }