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. *@paramargs{pageNum:"n",numPerPage:"n",orderField:"xxx",orderDirection:""}
4. *@paramrel：可选用于局部刷新divid号
5. */
6. functionnavTabPageBreak(args,rel){
7. //实质上调用的dwzPageBreak方法，dwzPageBreak是对navTab和dialog通用一个方法
8. dwzPageBreak({targetType:"navTab",rel:rel,data:args});
9. }
11. /**
12. *处理navTab中的分页和排序
13. *targetType:navTab或dialog
14. *rel:可选用于局部刷新divid号
15. *data:pagerForm参数{pageNum:"n",numPerPage:"n",orderField:"xxx",orderDirection:""}
16. *callback:加载完成回调函数
17. */
19. //这个方法是重点
20. functiondwzPageBreak(options){
21. //这里设置一些默认是属性
22. varop=$.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. varform=_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. varform=_getPagerForm($parent,op.data);
44. //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的
45. varparams=$(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. }
55. /**
56. *
57. *@param{Object}args{pageNum:"",numPerPage:"",orderField:"",orderDirection:""}
58. *@paramStringformId分页表单选择器，非必填项默认值是"pagerForm"
59. */
61. //dwzPageBreak方法调用这个方法
62. function_getPagerForm($parent,args){
63. //获取当前页面下查询Form节点
64. //#pagerFormId名字很重要如果传递不了参数，可以检查一下ID名称
65. varform=$("#pagerForm",$parent).get(0);
66. if(form){
67. //在这里会把你传递的参数附上。
68. if(args["pageNum"])form[DWZ.pageInfo.pageNum].value=args["pageNum"];
69. //<selectclass=""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. }
76. returnform;
77. }