DWZ (JUI) 教程 navTabPageBreak 流程分析

   最近工作很忙，部落格一直沒有更新，有些朋友發的郵件也沒有來得及回複，在這裡表示一下歉意。

   前一陣子有朋友問道 navTabPageBreak 查詢參數無法傳遞的問題，只有一張圖片，我很難找到具體原因，在這裡我把整個流程分析一下，這樣自己找找問題所在，

也希望能給其他的朋友帶來協助。

   我以表格控制項的 分頁顯示數量為例。dwz-ria-1.4.3

   先說一下流程

   

  

 

  1 分頁的Combox控制項的 onchange事件 觸發 navTabPageBreak

  2 navTabPageBreak 實質上是調用的 dwzPageBreak 方法

  這裡我就重點說明一下dwzPageBreak方法

 

/** * 處理navTab中的分頁和排序 * @param args {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""} * @param rel： 可選 用於局部重新整理div id號 */function navTabPageBreak(args, rel){        //實質上調用的 dwzPageBreak 方法，dwzPageBreak 是對navTab和dialog通用一個方法dwzPageBreak({targetType:"navTab", rel:rel, data:args});}/** * 處理navTab中的分頁和排序 * targetType: navTab 或 dialog * rel: 可選 用於局部重新整理div id號 * data: pagerForm參數 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""} * callback: 載入完成回呼函數 */ //這個方法是重點 function dwzPageBreak(options){        //這裡設定一些預設是屬性var op = $.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 下面會重點講解var form = _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 下面會重點講解             var form = _getPagerForm($parent, op.data);                        //擷取查詢表單裡參數，所以重新整理頁面時表表單資料是一併發過去的             var params = $(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:""} * @param String formId 分頁表單選取器，非必填項預設值是 "pagerForm" *///dwzPageBreak 方法調用這個方法 function _getPagerForm($parent, args) {         //擷取當前頁面下查詢Form節點         //#pagerForm Id 名字很重要 如果傳遞不了參數，可以檢查一下 ID 名稱               var form = $("#pagerForm", $parent).get(0);if (form) {                //在這裡會把你傳遞的參數附上。if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];                //<select class="" 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"];}return form;}