DWZ局部刷新实现
問題：我要刷新回收站頁(yè)簽的列表
當(dāng)點(diǎn)擊刷新的時(shí)候，我需要當(dāng)前頁(yè)面的數(shù)據(jù)進(jìn)行刷新，而不是刷新整改頁(yè)面
分析：
使用DWZ自帶框架的navTabPageBreak(args,rel)方法，需要傳入兩個(gè)參數(shù)。
??? navTabPageBreak(args,rel)方法代碼如下：
| /**?? ?*?處理navTab中的分頁(yè)和排序?? ?*?@param?args?{pageNum:"n",?numPerPage:"n",?orderField:"xxx",?orderDirection:""}?? ?*?@param?rel：?可選?用于局部刷新div?id號(hào)?? ?*/?? function?navTabPageBreak(args,?rel){?? ????????//實(shí)質(zhì)上調(diào)用的?dwzPageBreak?方法，dwzPageBreak?是對(duì)navTab和dialog通用一個(gè)方法?? ????dwzPageBreak({targetType:"navTab",?rel:rel,?data:args});?? }?? ??? /**?? ?*?處理navTab中的分頁(yè)和排序?? ?*?targetType:?navTab?或?dialog?? ?*?rel:?可選?用于局部刷新div?id號(hào)?? ?*?data:?pagerForm參數(shù)?{pageNum:"n",?numPerPage:"n",?orderField:"xxx",?orderDirection:""}?? ?*?callback:?加載完成回調(diào)函數(shù)?? ?*/?? ??? ?//這個(gè)方法是重點(diǎn)?? ?function?dwzPageBreak(options){?? ????????//這里設(shè)置一些默認(rèn)是屬性?? ????var?op?=?$.extend({?targetType:"navTab",?rel:"",?data:{pageNum:"",?numPerPage:"",?orderField:"",?orderDirection:""},?callback:null},?options);?? ????????//獲取默認(rèn)的父容器，一般就是當(dāng)前的dialog和當(dāng)?shù)膎avTab?? ????????var?$parent?=?op.targetType?==?"dialog"???$.pdialog.getCurrent()?:?navTab.getCurrentPanel();?? ????????//這里是局部的刷新，?流程就是通過Ajax請(qǐng)求獲取到新的html片段，替換掉?指定的id?(op.rel)節(jié)點(diǎn)，然后從新格式化布局。?? ????if?(op.rel)?{?? ????????var?$box?=?$parent.find("#"?+?op.rel);?? ????????????????//獲取當(dāng)前頁(yè)面的查詢form?下面會(huì)重點(diǎn)講解?? ????????var?form?=?_getPagerForm($box,?op.data);?? ????????if?(form)?{?? ????????????????????????//獲取新的html片段，替換掉原始的。?? ????????????$box.ajaxUrl({?????????????????????????????????????????//獲取查詢表單里參數(shù)，所以刷新頁(yè)面時(shí)表表單數(shù)據(jù)是一并發(fā)過去的??? ????????????????type:"POST",?url:$(form).attr("action"),?data:?$(form).serializeArray(),?callback:function(){?? ????????????????????????????????????????//重新格式化布局?? ????????????????????$box.find("[layoutH]").layoutH();?? ????????????????}?? ????????????});?? ????????}?? ?????????//刷新整個(gè)?navTab、或者?dialog?? ?????????}?else?{?? ?????????????//獲取當(dāng)前頁(yè)面的查詢form?下面會(huì)重點(diǎn)講解?? ?????????????var?form?=?_getPagerForm($parent,?op.data);?? ??????????????? ????????????//獲取查詢表單里參數(shù)，所以刷新頁(yè)面時(shí)表表單數(shù)據(jù)是一并發(fā)過去的??? ????????????var?params?=?$(form).serializeArray();?? ????????????//通過各個(gè)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?分頁(yè)表單選擇器，非必填項(xiàng)默認(rèn)值是?"pagerForm"?? ?*/?? ??? //dwzPageBreak?方法調(diào)用這個(gè)方法??? function?_getPagerForm($parent,?args)?{?? ?????????//獲取當(dāng)前頁(yè)面下查詢Form節(jié)點(diǎn)?? ?????????//#pagerForm?Id?名字很重要?如果傳遞不了參數(shù)，可以檢查一下?ID?名稱????????? ????????var?form?=?$("#pagerForm",?$parent).get(0);?? ????if?(form)?{?? ????????????????//在這里會(huì)把你傳遞的參數(shù)附上。?? ????????if?(args["pageNum"])?form[DWZ.pageInfo.pageNum].value?=?args["pageNum"];?? ????????????????//<select?class=""?onchange="navTabPageBreak({numPerPage:this.value})"?name="numPerPage">??? ????????????????//在這里附上值，從而達(dá)到你切換數(shù)量時(shí)刷新頁(yè)面的效果?? ????????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;?? } |
以上代碼轉(zhuǎn)載自：https://blog.csdn.net/java7star/article/details/9254569?
?
由此，我們給?navTabPageBreak(args,rel)函數(shù)傳入頁(yè)面內(nèi)需要刷新的并且?guī)в衦el屬性的標(biāo)簽
方法調(diào)用代碼：
| <li><div?class="buttonActive"><div?class="buttonContent"><button?type="button"?onclick="navTabPageBreak('','qd_showRecycle');?">刷新</button></div></div></li> |
rel參數(shù)（qd_showRecycle）指定(需要刷新)的標(biāo)簽：
| <table?id='table'?class="list"?width="100%"?layoutH="170"?rel="qd_showRecycle"> |
?
這樣，我們就可以局部刷新指定的頁(yè)簽了。
總結(jié)
