在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):

<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赋值

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

在open节点之后,新增节点

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

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

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

给该修改链接添加rel值:

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

(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();
}
}

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

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

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

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

DWZ (JUI) 教程 DWZ中dialog层的刷新的更多相关文章

  1. DWZ (JUI) 教程 dwz框架 刷新dialog解决方案

    在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的navTabId.       DWZ给我们提供了两个回调函数,一个是子窗口为navTab的navTabAjax ...

  2. DWZ(JUI) 教程 左侧栏默认是关闭状态的问题

    DWZ(JUI) 教程 左侧栏默认是关闭状态的问题,初始化是全屏状态,只需简单处理就可以了 $(function(){ DWZ.init("dwz.frag.xml", { log ...

  3. DWZ (JUI) 教程 tree 控件的选中事件

    DWZ (JUI) 教程 tree 控件的选中事件 先简单说一下流程 第一步 当然是先定义好回调事件了 function checkCallback(json){ ........... ...... ...

  4. DWZ (JUI) 教程 navTab 刷新分析

    navTab的刷新在doc文件里也有说明 首先 在form表单里指定好回调函数 * <form action="/user.do?method=save" onsubmit= ...

  5. DWZ(JUI) 教程 普通表单提交

    一类是普通的表单提交,另一类就是列表页面的表单提交,主要是用来查询搜索列表使用的.今天我就简单介绍一下前者. 这是官网上的普通列表页面, <div class="pageContent ...

  6. DWZ (JUI) 教程 根据ID刷新 dialog

    reloadDialog:function(dialogId){ var dialog = $("body").data(dialogId); if(dialog){ $.pdia ...

  7. DWZ(JUI) 教程 中如何整合第三方jQuery插件

    Query插件一般是$(document).ready()中初始化 $(document).ready(function(){  // 文档就绪,初始化jQuery插件| });  // 或者或缩写形 ...

  8. DWZ (JUI) 教程 table 排序

    dwz排序是后台排序,不是前台的js排序,他的流程和搜索,分页是一样的,当你点击排序的按钮时,从新发送请求刷新当前的navTable 和 dialog. <th width="60&q ...

  9. DWZ (JUI) 教程 国际化问题(多语言/语言切换)

    DWZ 国际化也是比较简单的,网站的内容国际化和常规的项目国际化是一样的,不要做出特殊的调整. DWZ 自身框架的国际化,比如 翻页的上一页下一页等信息.这些信息都是在dwz.frag.xml 文件当 ...

随机推荐

  1. com.sun.image.codec.jpeg--导入报错

    import com.sun.image.codec.jpeg; 这样导入的时候,总是报错:Only a type can be imported. com.sun.image.codec.jpeg ...

  2. Codeforces Round #188 (Div. 2) C. Perfect Pair 数学

    B. Strings of Power Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/318/p ...

  3. hdu 4828 Grids(拓展欧几里得+卡特兰数)

    题目链接:hdu 4828 Grids 题目大意:略. 解题思路:将上一行看成是入栈,下一行看成是出栈,那么执着的方案就是卡特兰数,用递推的方式求解. #include <cstdio> ...

  4. getElementById getElementsByName 赋值

      <script type="text/javascript">                            window.onload=function ...

  5. 一天掌握Android JNI本地编程 快速入门

    一.JNI(Java Native Interface)        1.什么是JNI:               JNI(Java Native Interface):java本地开发接口   ...

  6. MPI编程简单介绍

    第三章MPI编程 3.1 MPI简单介绍 多线程是一种便捷的模型,当中每一个线程都能够訪问其他线程的存储空间.因此,这样的模型仅仅能在共享存储系统之间移植.一般来讲,并行机不一定在各处理器之间共享存储 ...

  7. 解析Qt中QThread使用方法

    本文讲述的是在Qt中QThread使用方法,QThread似乎是很难的一个东西,特别是信号和槽,有非常多的人(尽管使用者本人往往不知道)在用不恰当(甚至错误)的方式在使用QThread,随便用goog ...

  8. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  9. SquashFs工具制作

    下面是SquashFs.tar.gz的下载地址,解压后,直接执行其中的Makefile即可. SquashFs.tar.gz 说明: 制作squashfs格式的压缩镜像: ./mksquashfs . ...

  10. 从 SDWebImage 谈如何为开源软件做贡献

    来源:伯乐在线 - 酷酷的哀殿 链接:http://ios.jobbole.com/89483/ 点击 → 申请加入伯乐在线专栏作者 从 SDWebImage 谈如何为开源软件做贡献 相识 – 知我者 ...