举例来说, 进入首页->点击用户列表出现"用户列表"navTab->在"在用户列表"navTab中点击添加出现"添加用户"navTab->添加完成并关闭"添加用户"navTab,并刷新"用户列表"navTab 这个流程
首先在首页进入"用户列表"navTab的链接中要指定这个navTab的rel属性,如下,这个navTab的rel属性被指定为main
<a href="user/userlist.html" target="navTab" rel="main">用户列表</a>
然后,在"添加用户"这个navTab的html代码中需要指定提交表单后需要返回的函数,如下,
onsubmit="return validateCallback(this, navTabAjaxDone)",提交后执行了validateCallback(),在这个函数中又执行了navTabAjaxDone()这个函数
<form method="post" action="user/douseradd.html?navTabId=useraddnavTab&callbackType=closeCurrent" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone)">
下面找到navTabAjaxDone()这个函数
function navTabAjaxDone(json){ DWZ.ajaxDone(json); if (json[DWZ.keys.statusCode] == DWZ.statusCode.ok){ if (json.navTabId){ //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的 navTab.reloadFlag(json.navTabId); } else { //重新载入当前navTab页面 var $pagerForm = $("#pagerForm", navTab.getCurrentPanel()); var args = $pagerForm.size()>0 ? $pagerForm.serializeArray() : {} navTabPageBreak(args, json.rel); } if ("closeCurrent" == json.callbackType) { setTimeout(function(){navTab.closeCurrentTab(json.navTabId);}, 100); } else if ("forward" == json.callbackType) { navTab.reload(json.forwardUrl); } else if ("forwardConfirm" == json.callbackType) { alertMsg.confirm(json.confirmMsg || DWZ.msg("forwardConfirmMsg"), { okCall: function(){ navTab.reload(json.forwardUrl); }, cancelCall: function(){ navTab.closeCurrentTab(json.navTabId); } }); } else { navTab.getCurrentPanel().find(":input[initValue]").each(function(){ var initVal = $(this).attr("initValue"); $(this).val(initVal); }); } } }
其他具体功能在这里不过多解释,重点是下列代码
if (json.navTabId){ //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的 navTab.reloadFlag(json.navTabId); }
可以看出,这里会判断服务器后台返回的json中是否有navTabId这个字段,如果有就调用navTab.reloadFlag(json.navTabId)这个函数刷新指定的navTab
就需要在服务器回传的json中加入navTabId,并将值设为要刷新的navTab的rel值,已上面的举例就是main