DWZ (JUI) 教程 DWZ中dialog层的刷新

简介: 原文:DWZ (JUI) 教程 DWZ中dialog层的刷新在DWZ开发过程中经常会遇到的一种情况就是:在navTab页面中通过a标签打开一个dialog,在dialog层进行操作后,需要对该dialog层进行必要的刷新操作。
原文: DWZ (JUI) 教程 DWZ中dialog层的刷新

在DWZ开发过程中经常会遇到的一种情况就是:在navTab页面中通过a标签打开一个dialog,在dialog层进行操作后,需要对该dialog层进行必要的刷新操作。

1.首先讲一下思路:

 在非dialog页面中,也就是navTab页面中,将传递rel的值作为刷新的途径。在那种情况下,rel值为navTab的navTabId,所以在dialog中,只要将dialogId获取到,并作为rel值在dialog层传递即可。

2.其次给大家看看我的操作图:

图1-点击navTab上的修改,进入一级dialog页面

图1-点击navTab页面的修改进入第一个dialog页面

图2-点击一级dialog的修改操作,进入二级dialog的详情修改页面

图2-点击dialog层的修改,弹出的二级dialog页面

说明:我的操作就是:打开navTab上的修改页面,显示一个dialog层的列表信息,然后再在一级dialog上点击修改,打开二级dialog,在二级dialog上修改完毕后,关闭当前的二级dialog,然后刷新一级dialog。

3.步骤:

(1)在a链接中指定rel值(即将打开的dialog层的ID):

<a href ="score.do?method=goQueryRuleDetail" target="dialog" rel="firstDialogId"  width="950" height="380"  title="标题">修改</a>
View Code

(2)在dwz.dialog.js中修改部分代码($.pdialog上一行):

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

找到 open:function(url, dlgid, title, options),给刚刚声明的currentDialogId赋值

open:function(url, dlgid, title, options) { currentDialogId = dlgid;//新增部分,赋值 var op = $.extend({},$.pdialog._op, options); var dialog = $("body").data(dlgid);

View Code

在open节点之后,新增节点

getcurrentDialogId:function(){//获取当前窗口ID return currentDialogId; },

View Code

(3)一级dialog页面,修改链接:

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

给该修改链接添加rel值:

<script type="text/javascript">
  $(function(){
      var currentDialogId = $.pdialog.getcurrentDialogId();//获取当前窗口的ID
      var tempHref = $("#goToModify").attr("href");
      $("#goToModify").attr("href",tempHref + "&rel="+currentDialogId);
  });
  </script>
View Code

(4)经过后台的传递,二级dialog页面也已经有rel的值了。此时,要写一个二级dialog提交后的回调函数。在dwz.ajax.js里面添加如下代码:

* dialog层之上的dialog(二级dialog)表单提交回调函数
   * 服务器回转dialogId,可以重新载入指定的dialogId,statusCode=DWZ.statusCode.ok表示操作成功, 自动关闭当前dialog
   * form提交后返回json数据结构,json格式和navTabAjaxDone一致
   * @param json
   */
  function dialogLayerAjaxDone(json){
      DWZ.ajaxDone(json);
      if (json.statusCode == DWZ.statusCode.ok){
         if (json.dialogId){
             var dialog = $("body").data(json.dialogId);
             $.pdialog.reload(json.forwardUrl, {dialogId: json.dialogId});
         }
         $.pdialog.closeCurrent();
     }
 }
View Code

(5)二级dialog表单form回调函数:

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

注:二级dialog提交至后台后,后台需指定forwardUrl(重载URL)和dialogId(需要刷新的一级dialogId),返回的JSON数据格式为:

{
     "statusCode":"",//状态代码
     "message":"",
     "dialogId":"",//需要刷新的一级dialogId
     "callbackType":"",
     "forwardUrl":"",
     "url":"",
     "urldata":""
 }
View Code

目录
相关文章
|
2月前
使用ueditor实现多图片上传案例——DaoImpl层(BaseDaoUtilImpl)
使用ueditor实现多图片上传案例——DaoImpl层(BaseDaoUtilImpl)
11 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能1
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能1
27 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能3
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能3
31 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能2
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能2
35 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
33 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能4
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能4
28 0
egret微信小游戏自定义加载(loading)界面
egret微信小游戏自定义加载(loading)界面
egret微信小游戏自定义加载(loading)界面
|
XML 存储 前端开发
dwz之BaseConditionVO
dwz之BaseConditionVO
109 0
|
JavaScript Java
dwz嵌入jqGrid(1)
dwz嵌入jqGrid
126 0
dwz嵌入jqGrid(1)
|
XML JavaScript 前端开发
dwz嵌入jqGrid(2)
dwz嵌入jqGrid
162 0