在⼀个页⾯中有多个Tab的问题
在⼀个页⾯中有多个Tab的问题可以这样来处理：
参照
⼯程项⽬管理/单位⼯程项⽬完⼯管理/申请列表
⽐如在此页⾯中有三个Tab切换：
那么要拆成四个页⾯⼀个Mange+三个Tab的页⾯
1、Manage页⾯：在Tabs中的TabsContent⾥⾯要有三个<div></div>这⼀定要有不能删掉。
<div class="page">
<div class="pageContent">
<div class="tabs" currentindex="2" eventtype="click">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li><a href="a.aspx" class="j-ajax"
><span>名称1</span></a></li>
<li><a href="b.aspx" class="j-ajax"
><span>名称2</span></a></li>
<li><a href="c.aspx" class="j-ajax"
><span>名称3</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" >
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
</div>
</div>
</div>
2、其他的三个页⾯的格式为：
<div class="panelBar">
<form id="pagerForm"
action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx"
method="post">
<input type="hidden" name="status" value="active"/>
<input type="hidden" name="pageNum" />
<input type="hidden" name="numPerPage" value="<%=numPerPage.Value%>" />
</form>
<ul class="toolBar">
<li><a class="delete"
href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx?fuid={sid_fin}" target="navTabTodo"
title="确定要反审核吗?"><span>反审核</span></a></li>  </ul>
</div>
<table class="table" layouth="138">
</table>
<div class="panelBar">
<div class="pages">
<span>显⽰</span>
<select id="numPerPage" runat="server"
onchange="tabPageBreak(gpage.jObj('tab2'),{numPerPage:this.value})">
<option value="3" selected="selected">3</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
<span>条，共<%=total %>条</span>
</div>
<div class="pagination" targettype="navTab" totalcount="<%=total
%>" numperpage="<%=numPerPage.Value %>" currentpage="<%=pageNum %>" tab="tab2">
</div>
</div>
3、在其他的三个页⾯中⼀开始就应该写<div class="panelBar"></div
class="panelBar">，前⾯的样式不需要，因为我们加载的时候前⾯的样式已经加载了所以只需要从panelBar开始加载即可。
⽐如上⾯显⽰处理分页的pagerForm也可以放到pagelBar⾥⾯。不能放到外⾯，不会加载的。
4、对于分页因为涉及到多个Tab的同时分页的问题，但是⼀个页⾯只有⼀个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁琐，
所以现在我们拆开来处理。⾥⾯的分页稍作了修改，以前我们⽤navTabPageBreak()；现在我们⽤tabPageBreak并将当前tab2加了前缀的的值传到脚本中。
现在看⼀下原理：
1、系统的indext.aspx为最新加载的页⾯，在IndexT.aspx.js中DWZ初始化的时候执⾏函数
⽽函数initEnv()的位置为：dwz.ui.js页⾯，在initEnv()中主要是初始化了系统的北京缓存展现形式，各种控件⽐如li,taskbarlist等等，还有个更重要的⼯作为：initUI()；在initUI()中，系统初始化了它的树状列表的显⽰形式，按钮，Table的样式，以及li的navTab的属性，包括分页的功能，我们在函数的最下⾯看到
$("div.pagination", jParent).each(function(){
var $this = $(this);
$this.pagination({
targetType:$this.attr("targetType"),
totalCount:$this.attr("totalCount"),
numPerPage:$this.attr("numPerPage"),
pageNumShown:$this.attr("pageNumShown"),
currentPage:$this.attr("currentPage"),
tab: $this.attr("tab")//2011-02-28 王华杰增加tab id
});
});
这⾥是将分页的各个参数放到pagiination中，这样我们可以直接调⽤它，现在我们为pagination的属性添加了tab的属性，
然后进⼊dwz.pagination.js页⾯中看⼀下函数
nction($) {
2、$.fn.pagination = function(opts) {
var setting = {
first$: "li.j-first", prev$: "li.j-prev", next$: "li.j-next",
last$: "li.j-last", nums$: "li.j-num>a", jumpto$: "li.jumpto",
pageNumFrag: '<li class="#liClass#"><a href="#">#pageNum#</a></li>'
};
return。。。。。。。。。。。。。。。。。。。。
}
在函数pageination中我们发现将刚才我们定义的tab，pageNumShown全部赋值给了opts.
在返回的代码中有  var pc = new Pagination(opts);，⼜将opts的数据传送给了pc,
这样我们在pc⾥⾯可以⽤pc.tab来调⽤我们的tab的值，
考虑到我们的tab的值是在变化的，因为在所有的页⾯中id都是要加前缀的，⽽且可能加的还不⼀样，所以我们专门写了在dwz.pagination.js 的最后写了
tab:function()
{
if(this.opts.tab)
{
return gpage.jObj(this.opts.tab);
}
return ;
}
保证我们取得tab的ID正确的加了前缀之后的值。
3、我们加上Tab的原因是因为在⼀个⼩的navTab⾥⾯我们要实现切换Tab现在取到了Tab的id，所以我们要使⽤它来取到这⼀个单独的tab 中的数据。
在dwz.pagination.js中代码：
for (var i = interval.start; i < d; i++) {
pageNumFrag += placeAll("#pageNum#",
i).replaceAll("#liClass#", i == pc.getCurrentPage() ? 'selected j-num' :
'j-num');
}
$this.html(DWZ.frag["pagination"].replaceAll("#pageNumFrag#",
pageNumFrag).replaceAll("#currentPage#",
var $first = $this.find(setting.first$);
var $prev = $this.find(setting.prev$);
var $next = $this.$);
var $last = $this.find(setting.last$);
显⽰了将前页，后页，⾸页，末页，还有每⼀个⼩页1，2,3，。。。。。等均初始化。
if (pc.hasPrev()){  _bindEvent($prev, pc.getCurrentPage() - 1,
pc.targetType(), pc.tab());
_bindEvent($first, 1, pc.targetType(), pc.tab());
} ===》含义为当有前页的话，就绑定前页和⾸页，现在我我们将⾃⼰的参数传⼊。
在绑定的函数中  function _bindEvent(jTarget, pageNum, targetType, tab) {
jTarget.bind("click", { pageNum: pageNum }, function(event) {
if (targetType == "dialog") {
dialogPageBreak({ pageNum: event.data.pageNum });
} else {
if (!tab) {
navTabPageBreak({ pageNum: event.data.pageNum });
}
else {
tabPageBreak(tab, { pageNum: event.data.pageNum});
}
}
event.preventDefault();
});
}
我们加上了参数tab，假如if(!tab)没有tab参数的话，执⾏原来的函数，假如有tab参数的话，我们新的函数。tabPageBreak() 4、在dwz.ajax.js中可以看到这个函数的全貌。
原先的函数：
function dialogPageBreak(args){
var form = _getPagerForm($.Current(), args);
if (form) $.load(form.action, $(form).serializeArray());
}
现在的函数增加处理同页⾯多tab的分页，tabpanel为tab
function tabPageBreak(tabpanel,args) {
var form = _getPagerForm(tabpanel, args);
if (form) tabpanel.loadUrl(form.action, $(form).serializeArray());
}
请注意这⾥使⽤的是tabpanel.loadUrl（），⽽不是pdialog的reload()函数。
因为reload()函数pdialog是有的，但是tabpanel是不存在的。
5、我们在mange页⾯中添加了eAuditFinished.aspx" class="j-ajax"
><span>审批通过</span></a></li>
<li><a
href="ProjectManage/FinishedProject/FinishedProjectManageRefuseAudit.aspx"
class="j-ajax" ><span>审批未通过</span></a></li>
⾥⾯有class="j-ajax"
原因为：在dwz.tab.js中，有函数tabs: function (options){
var op = $.extend({reverse:false, eventType:"click", curentIndex:0,
stTabHeader:"> .tabsHeader", stTab:">.tabsHeaderContent>ul", stTabPanel:">
.tabsContent", ajaxClass:"j-ajax", closeClass:"close", prevClass:"tabsLeft",
nextClass:"tabsRight"}, options);
return this.each(function(){
initTab($(this));
});
将ajaxClass赋值为“j-ajax”，然后在函数的后⾯写了    if
($(this).hasClass(op.ajaxClass)) {
$(this).click(function(event){
var jGroup = jGroups.eq(iTabIndex);
if (this.href)
jGroup.loadUrl(this.href,{},function(){
jGroup.find("[layoutH]").layoutH();
});
event.preventDefault();
});
当函数的class=op.ajaxClass也就是"j-ajax"的话函数执⾏
$(this).click(function(event){
var jGroup = jGroups.eq(iTabIndex);
if (this.href)
jGroup.loadUrl(this.href,{},function(){
jGroup.find("[layoutH]").layoutH();
});
event.preventDefault();
⾥⾯的loadUrl()；就是我们⼀直在提的Ajax的异步加载。
<div class="tabsContent" >
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
要在tabsContent中加上三个div，假如不加的话那么我们的JGroups将⼀直为空。
因为我们是异步加载的LoadUrl()；所以我们的另⼀个页不需要<div class="panelBar">加前⾯的即可了
在此不同的标签页中，⽐如第⼆个标签页：审批通过，选择某⼀条在选择反审核时，原先的是反审核完毕后会刷新⽗页也就是FinishedProjectManage.aspx页⾯，因为在删除的cs中当成功后使⽤了代码：
AjaxResult result = new AjaxResult();
result.statusCode = "200";
result.navTabId = "finishedprojectmanage";
// result.callbackType = "closeCurrent";
result.forwardUrl =
"ProjectManage/FinishedProject/FinishedProjectManage.aspx";
FormatJsonResult jsonResult = new FormatJsonResult();
jsonResult.Data = result;
Response.Write(jsonResult.FormatResult());
Response.End();
这段话使刷新定位到了管理页⾯，想让他成功后定位到Tab页中，在cs页不好处理，我们可以将它放到前台的aspx页中，因为在DWZ的dwz.ui.js中我们发现target=dialog和target=navTabTodo，均暴露出了函数callback()，也就是说他们在执⾏完打开dialog和navtabToDo后，会执⾏callback()函数，我们可以
在前台重载此函数，并将刷新的代码放到⾥⾯即可。
这⾥有⼀个问题：我们要在后台执⾏完删除后加上：
AjaxResult result = new AjaxResult();
result.statusCode = "200";
FormatJsonResult jsonResult = new FormatJsonResult();
jsonResult.Data = result;
Response.Write(jsonResult.FormatResult());
Response.End();
不加上它callback会报错的。
在反审核的⾥⾯加了代码：callback="refreshTab"
<li><a class="delete"
href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx?fuid={sid_fin}"
target="navTabTodo"
title="确定要反审核吗?"
callback="refreshTab"><span>反审核</span></a></li>
然后在FinishedProjectManageAuditFinished.aspx.js 添加了代码：
function refreshTab() {
gpage.jObj('tab2').loadUrl("ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx");
}
我们刷新tab⽤到了loadurl函数，使⽤局部刷新来做到。tab2是我们的tab 的ID，根据情况可适当修改
对于分标签页的检索问题，开始我们⽤的是：<form onsubmit="return navTabSearch(this);"
action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx"
method="post">
这⾥我们的onsubmit⽤到了navTabSearch(this)，这个是navTab的标签⽤的搜索⽅式，显然不适合我们的Tab标签。我们到navTabSearch(this)的源码：dwz.ajax.js页中，发现他在执⾏此函数的时候function
navTabSearch(form){
return false;
}
直接将整个navTab刷新了。这就是为什么每次点击查询总数全部刷新的原因，现在我们重新添加了函数：
function tabSearch(tab, form) {
为什么要用ajaxtab.loadUrl(form.action, $(form).serializeArray());
return false;
}
tabSearch可以将tab的Id传过来，然后执⾏tab.loadUrl()，函数loadUrl()，是所有刷新函数的⽗函数，也就是说⽐如Reload()函数最终还是会调⽤loadUrl()函数的。loadUrl()我们在aspx的js页中也多次使⽤它进⾏局部刷新。
他可以做到只刷新指定的容器，⽐如现在我们只刷新Tab容器。将Tab的Id传过来我们使⽤了gpage.jObj('tab2')这样将修改后的ID传过来了。在做检索和⾼级检索的时候我们要在后台写上格式类似于：
List<DataFilter> dflist = new List<DataFilter>();
if (HttpContext.Current.Request.Params["ProState"] != "" &&
HttpContext.Current.Request.Params["ProState"] != null)
{
DataFilter df = new DataFilter();
df.field = "ProState";
df.value = HttpContext.Current.Request.Params["ProState"];
dflist.Add(df);
}
if (HttpContext.Current.Request.Params["ProScale"] != "" &&
HttpContext.Current.Request.Params["ProScale"] != null)
{
DataFilter df = new DataFilter();
df.field = "ProScale";
df.value = HttpContext.Current.Request.Params["ProScale"];
dflist.Add(df);
}
，别忘了在前台也要写上：
<input type="hidden" name="ProName" value="<%=Request.Form["ProName"]==null?"":
Request.Form["ProName"].ToString()%>" />
<input type="hidden" name="ProState"
value="<%=HttpContext.Current.Request.Params["ProState"]==null?"":HttpContext.Current.Request.Params["ProState"].ToString() %>" />
，再将每⼀个参数对应的input加到form中，当然这只是我写的⼀个例⼦，具体的情况要具体确定的。
这样我们才可以在点击翻页的时候同时将参数传过去。
当Target=dialog的时候我们不能直接写callback="refreshTab"然后将refreshTab放到aspx.js页中定义，⽐如在第⼀个Tab中点击添加的时候，当dialog关闭的时候会同时刷新当前的Tab，我们的做法是：
在弹出的dialog的后台cs中写上：
AjaxResult result = new AjaxResult();
result.statusCode = "200";
FormatJsonResult jsonResult = new
FormatJsonResult();
jsonResult.Data = result;
Response.Write(jsonResult.FormatResult());
Response.End();
跟刚才是⼀样的。只让它返回成功的字符串，在当前的Tab中target=“dialog” 中添加了 callback=" function callback()
{
gpage.jObj('tab1').loadUrl('ProjectManage/FinishedProject/FinishedProjectManageNoAudit.aspx');
}"
只能这样写，函数的名字只能为callback,⽽且要将函数体写在aspx页⾯⾥⾯。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。