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页面

图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层的刷新的更多相关文章
- DWZ (JUI) 教程 dwz框架 刷新dialog解决方案
在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的navTabId. DWZ给我们提供了两个回调函数,一个是子窗口为navTab的navTabAjax ...
- DWZ(JUI) 教程 左侧栏默认是关闭状态的问题
DWZ(JUI) 教程 左侧栏默认是关闭状态的问题,初始化是全屏状态,只需简单处理就可以了 $(function(){ DWZ.init("dwz.frag.xml", { log ...
- DWZ (JUI) 教程 tree 控件的选中事件
DWZ (JUI) 教程 tree 控件的选中事件 先简单说一下流程 第一步 当然是先定义好回调事件了 function checkCallback(json){ ........... ...... ...
- DWZ (JUI) 教程 navTab 刷新分析
navTab的刷新在doc文件里也有说明 首先 在form表单里指定好回调函数 * <form action="/user.do?method=save" onsubmit= ...
- DWZ(JUI) 教程 普通表单提交
一类是普通的表单提交,另一类就是列表页面的表单提交,主要是用来查询搜索列表使用的.今天我就简单介绍一下前者. 这是官网上的普通列表页面, <div class="pageContent ...
- DWZ (JUI) 教程 根据ID刷新 dialog
reloadDialog:function(dialogId){ var dialog = $("body").data(dialogId); if(dialog){ $.pdia ...
- DWZ(JUI) 教程 中如何整合第三方jQuery插件
Query插件一般是$(document).ready()中初始化 $(document).ready(function(){ // 文档就绪,初始化jQuery插件| }); // 或者或缩写形 ...
- DWZ (JUI) 教程 table 排序
dwz排序是后台排序,不是前台的js排序,他的流程和搜索,分页是一样的,当你点击排序的按钮时,从新发送请求刷新当前的navTable 和 dialog. <th width="60&q ...
- DWZ (JUI) 教程 国际化问题(多语言/语言切换)
DWZ 国际化也是比较简单的,网站的内容国际化和常规的项目国际化是一样的,不要做出特殊的调整. DWZ 自身框架的国际化,比如 翻页的上一页下一页等信息.这些信息都是在dwz.frag.xml 文件当 ...
随机推荐
- 根据PID和VID得到USB转串口的串口号
/******************************************************************************* * * FindAppUART.cpp ...
- MySQL中你肯定不知道的int隐情
MySQL中定义id字段为int类型,但是你知道它内部是什么玩意吗? 1.如果定义int类型,但是不声明长度,系统默认为11个长度(这个大家都知道): 2.如果指定长度小于11,实际上系统还是默认为1 ...
- 一分钟制作U盘版BT3 - 有图滴儿 bt3破解教程
一分钟制作 BT3 U盘版方便,快捷简单无效不退款 光盘版BT3, 大概694MB,直接刻盘,然后用光盘引导,就可以进入bt3,连接为:http://ftp.heanet.ie/mirrors/bac ...
- Codeforces Beta Round #5 C. Longest Regular Bracket Sequence 栈/dp
C. Longest Regular Bracket Sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.c ...
- Java IO之File
FILE类是用来实现获取文件.文件夹的类库工具,File并不是像类名所表示的那样仅仅是用来表示文件.它还能够用来表示文件夹. 所以能够用File来获取一个文件夹下的全部文件,甚至是文件夹中的文件. 一 ...
- 《linux 内核全然剖析》 chapter 2 微型计算机组成结构
微型计算机组成结构 系统的基本组成: 软件是一种控制硬件操作和动作的指令流. 2.1 微型计算机的组成原理 当中CPU通过地址线,数据线,和控制信号线组成的内部总线与系统其它部分进行数据通信.地址线用 ...
- [Node.js] Broswerify -- 1
Browserify is a tool that brings node.js style development to the browser. The thing you can see on ...
- <QtEndian> - Endian Conversion Functions
The <QtEndian> header provides functions to convert between little and big endian representati ...
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- Redis 管道技术
Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务.这意味着通常情况下一个请求会遵循以下步骤: 客户端向服务端发送一个查询请求,并监听Socket返回,通常是以阻塞模式,等待服务端响 ...