DWZ中dialog層的刷新

　　在DWZ開發過程當中常常會遇到的一種狀況就是：在navTab頁面中經過a標籤打開一個dialog，在dialog層進行操做後，須要對該dialog層進行必要的刷新操做。我將方法整理在這裏，請須要學習的孩子們看看哦。

1.首先講一下思路：

　在非dialog頁面中，也就是navTab頁面中，將傳遞rel的值做爲刷新的途徑。在那種狀況下，rel值爲navTab的navTabId，因此在dialog中，只要將dialogId獲取到，並做爲rel值在dialog層傳遞便可。

2.其次給你們看看個人操做圖：

圖1-點擊navTab上的修改，進入一級dialog頁面

圖2-點擊一級dialog的修改操做，進入二級dialog的詳情修改頁面

說明：個人操做就是：打開navTab上的修改頁面，顯示一個dialog層的列表信息，而後再在一級dialog上點擊修改，打開二級dialog，在二級dialog上修改完畢後，關閉當前的二級dialog，而後刷新一級dialog。

3.步驟：

（1）在a連接中指定rel值（即將打開的dialog層的ID）：

1 <a href ="score.do?method=goQueryRuleDetail" target="dialog" rel="firstDialogId"  width="950" height="380"  title="標題">修改</a>

（2）在dwz.dialog.js中修改部分代碼（$.pdialog上一行）：

var currentDialogId = "";//2013-07-19 lucky add

• 找到 open:function(url, dlgid, title, options)，給剛剛聲明的currentDialogId賦值

1 open:function(url, dlgid, title, options) {
2     currentDialogId = dlgid;//新增部分，賦值
3     var op = $.extend({},$.pdialog._op, options);    
4     var dialog = $("body").data(dlgid);
5         ……

• 在open節點以後，新增節點

1 ,getcurrentDialogId:function(){//獲取當前窗口ID
2     return currentDialogId;
3 },

（3）一級dialog頁面，修改連接：

1 <a href="score.do?method=goModifyPage" target="dialog" id="goToModify">修改</a>

• 給該修改連接添加rel值：

1  <script type="text/javascript">
2  $(function(){
3      var currentDialogId = $.pdialog.getcurrentDialogId();//獲取當前窗口的ID
4      var tempHref = $("#goToModify").attr("href");
5      $("#goToModify").attr("href",tempHref + "&rel="+currentDialogId);
6  });
7  </script>

（4）通過後臺的傳遞，二級dialog頁面也已經有rel的值了。此時，要寫一個二級dialog提交後的回調函數。在dwz.ajax.js裏面添加以下代碼：

 1 /**2013-07-19 lucky add
 2  * dialog層之上的dialog（二級dialog）表單提交回調函數
 3  * 服務器迴轉dialogId,能夠從新載入指定的dialogId，statusCode=DWZ.statusCode.ok表示操做成功, 自動關閉當前dialog
 4  * form提交後返回json數據結構,json格式和navTabAjaxDone一致
 5  * @param json
 6  */
 7 function dialogLayerAjaxDone(json){
 8     DWZ.ajaxDone(json);
 9     if (json.statusCode == DWZ.statusCode.ok){
10         if (json.dialogId){
11             var dialog = $("body").data(json.dialogId);
12             $.pdialog.reload(json.forwardUrl, {dialogId: json.dialogId});
13         }
14         $.pdialog.closeCurrent();
15     }
16 }

（5）二級dialog表單form回調函數：

onsubmit="return validateCallback(this, dialogLayerAjaxDone);"

注：二級dialog提交至後臺後，後臺需指定forwardUrl(重載URL)和dialogId（須要刷新的一級dialogId），返回的JSON數據格式爲：

1 {
2     "statusCode":"",//狀態代碼
3     "message":"",
4     "dialogId":"",//須要刷新的一級dialogId
5     "callbackType":"",
6     "forwardUrl":"",
7     "url":"",
8     "urldata":""
9 }

到這裏差很少結束了。有問題的再用firebug調試調試吧。

學習建議：

• 不要以本身看不懂js代碼爲藉口就不去看源碼，不看永遠不會
• 有問題找demo，找文檔；本身先嚐試着解決