DWZ局部刷新实现
問題：我要刷新回收站頁簽的列表
當點擊刷新的時候，我需要當前頁面的數據進行刷新，而不是刷新整改頁面
分析：
使用DWZ自帶框架的navTabPageBreak(args,rel)方法，需要傳入兩個參數。
??? navTabPageBreak(args,rel)方法代碼如下：
| /**?? ?*?處理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;?? } |
以上代碼轉載自：https://blog.csdn.net/java7star/article/details/9254569?
?
由此，我們給?navTabPageBreak(args,rel)函數傳入頁面內需要刷新的并且帶有rel屬性的標簽
方法調用代碼：
| <li><div?class="buttonActive"><div?class="buttonContent"><button?type="button"?onclick="navTabPageBreak('','qd_showRecycle');?">刷新</button></div></div></li> |
rel參數（qd_showRecycle）指定(需要刷新)的標簽：
| <table?id='table'?class="list"?width="100%"?layoutH="170"?rel="qd_showRecycle"> |
?
這樣，我們就可以局部刷新指定的頁簽了。
總結
