DWZ (JUI) 教程 navTabPageBreak 流程分析

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

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

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

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

先说一下流程


DWZ (JUI) 教程 navTabPageBreak 流程分析

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

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

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


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

你可能感兴趣的:(break)