tab页

2、其他的三个页⾯的格式为：

action="ProjectManage/FinishedProject/"

method="post">

"/>

href="ProjectManage/FinishedProject/?fuid={sid_fin}"

target="navTabTodo"

title="确定要反审核吗?">反审核

显⽰

onchange="tabPageBreak(('tab2'),{numPerPage:})">

3

20

30

50

条仓库盘点管理流程 ，共<%=total%>条

%>"numperpage="<%=%>"currentpage="<%=pageNum%>"tab="tab2">

3、在其他的三个页⾯中⼀开始就应该写

class="panelBar">，前⾯的样式不需要，因为我们加载的时候前⾯的样式已经加载了所以只需要从panelBar开始加载即可。

⽐如上⾯显⽰处理分页的pagerForm也可以放到pagelBar⾥⾯。不能放到外⾯，不会加载的。

4、对于分页因为涉及到多个Tab的同时分页的问题，但是⼀个页⾯只有⼀个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁

琐，

所以现在我们拆开来处理。⾥⾯的分页稍作了修改，以前我们⽤navTabPageBreak()；现在我们⽤tabPageBreak并将当前tab2加了前缀的

的值传到脚本中。

现在看⼀下原理：

1、系统的为最新加载的页⾯，在中DWZ初始化的时候执⾏函数

⽽函数initEnv()的位置为：页⾯，在initEnv()中主要是初始化了系统的北京缓存展现形式，各种控件⽐如li,taskbarlist等等，还有个

更重要的⼯作为：initUI();在initUI()中，系统初始化了它的树状列表的显⽰形式，按钮，Table的样式，以及li的navTab的属性，包括分页的

功能，我们在函数的最下⾯看到

$("tion",jParent).each(function(){

var$this=$(this);

$tion({

targetType:$("targetType"),

totalCount:$("totalCount"),

numPerPage:$("numPerPage"),

pageNumShown:$("pageNumShown"),

currentPage:$("currentPage"),

tab:$("tab")//2011-02-28王华杰增加tabid

});

});

这⾥是将分页的各个参数放到pagiination中，这样我们可以直接调⽤它，现在我们为pagination的属性添加了tab的属性，

然后进⼊页⾯中看⼀下函数

nction($){

2、$.你的名字日文 tion=function(opts){

vartting={

first$:"li.j-first",prev$:"li.j-prev",next$:"li.j-next",

last$:"li.j-last",nums$:"li.j-num>a",jumpto$:"",

pageNumFrag:'#pageNum#'

};

return。。。。。。。。。。。。。。。。。。。。

}

在函数pageination中我们发现将刚才我们定义的tab，pageNumShown全部赋值给了opts.

在返回的代码中有varpc=newPagina小学图书 tion(opts);，⼜将opts的数据传送给了pc,

这样我们在pc⾥⾯可以⽤来调⽤我们的tab的值，

考虑到我们的tab的值是在变化的，因为在所有的页⾯中id都是要加前缀的，⽽且可能加的还不⼀样，所以我们专门写了在

的最后写了

tab:function()

{

if()

{

();

}

return;

}

保证我们取得tab的ID正确的加了前缀之后的值。

3、我们加上Tab的原因是因为在⼀个⼩的navTab⾥⾯我们要实现切换Tab现在取到了Tab的id，所以我们要使⽤它来取到这⼀个单独的tab

中的数据。

在中代码：

for(vari=;i<;i++){

pageNumFrag+=eAll("#pageNum#",

i).replaceAll("#liClass#",i==rentPage()?'lectedj-num':

'j-num');

}

$(["pagination"].replaceAll("#pageNumFrag#",

pageNumFrag).replaceAll("#currentPage#",

rentPage())).find("li").hoverClass();

var$first=$($);

var$prev=$($);

var$next=$($);

var$last=$($);

显⽰了将前页，后页，⾸页，末页，还有每⼀个⼩页1，2,3，。。。。。等均初始化。

if(v()){_bindEvent($prev,rentPage()-1,

Type(),());

_bindEvent($first,1,Type(),());

}===》含义为当有前页的话，就绑定前页和⾸页，现在我我们将⾃⼰的参数传⼊。

在绑定的函数中function_bindEvent(jTarget,pageNum,targetType,tab){

("click",{pageNum:pageNum},function(event){

if(targetType=="dialog"){

dialogPageBreak({pageNum:m});

}el{

if(!tab){

navTabPageBreak({pageNum:m});

}

el{

tabPageBreak(tab,{pageNum:m});

}

}

tDef补肺的最佳食物 ault();

});

}

我们加上了参数tab,假如if(!tab)没有tab参数的话，执⾏原来的函数，假如有tab参数的话，我们新的函数。tabPageBreak()

4、在中可以看到这个函数的全貌。

原先的函数：

functiondialogPageBreak(args){

varform=_getPagerForm($.rent(),args);

if(form)$.(,$(form).rializeArray());

}

现在的函数增加处理同页⾯多tab的分页，t电商网络推广 abpanel为tab

functiontabPageBreak(tabpanel,args){

varform=_getPagerForm(tabpanel,args);

if(form)l(,$(form).rializeArray());

}

请注意这⾥使⽤的是l（），⽽不是pdialog的reload()函数。

因为reload()函数pdialog是有的，但是tabpanel是不存在的。

5、我们在mange页⾯中添加了"class="j-ajax"

>审批通过

href="ProjectManage/FinishedProject/"

class="j-ajax">审批未通过

⾥⾯有class="j-ajax"

原因为：在中，有函数tabs:function(options){

varop=$.extend({rever:fal,eventType:"click",curentIndex:0,

stTabHeader:">.tabsHeader",stTab:">.tabsHeaderContent>ul",stTabPanel:">

.tabsContent",ajaxClass:"j-ajax",cloClass:"clo",prevClass:"tabsLeft",

nextClass:"tabsRight"},options);

(function(){

initTab($(this));

});

将ajaxClass赋值为“j-ajax”，然后在函数的后⾯写了if

($(this).hasClass(ass)){

$(this).click(function(event){

varjGroup=(iTabIndex);

if()

l(,{},function(){

("[layoutH]").layoutH();

});

tDefault();

});

当函数的class=ass也就是"j-ajax"的话函数执⾏

$(this).click(function(event){

varjGroup=(iTabIndex);

if()

l(,{},function(){

("[layoutH]").layoutH();

});

tDefault();

⾥⾯的loadUrl();就是我们⼀直在提的Ajax的异步加载。

要在tabsContent中加上三个div，假如不加的话那么我们的JGroups将⼀直为空。

因为我们是异步加载的LoadUrl()；所以我们的另⼀个页不需要加前⾯的即可了

在此不同的标签页中，⽐如第⼆个标签页：审批通过，选择某⼀条在选择反审核时，原先的是反审核完毕后会刷新⽗页也就是

页⾯，因为在删除的cs中当成功后使⽤了代码：

AjaxResultresult=newAjaxResult();

Code="200";

e="操作成功";

Id="f地瓜球 inishedprojectmanage";

//ckType="cloCurrent";

dUrl=

"ProjectManage/FinishedProject/";

FormatJsonResultjsonResult=newFormatJsonResult();

=result;

(Result());

();

这段话使刷新定位到了管理页⾯，想让他成功后定位到Tab页中，在cs页不好处理，我们可以将它放到前台的aspx页中，因为在DWZ的

中我们发现target=dialog和target=navTabTodo，均暴露出了函数callback(),也就是说他们在执⾏完打开dialog和navtabToDo后，会

执⾏callback()函数，我们可以在前台重载此函数，并将刷新的代码放到⾥⾯即可。

这⾥有⼀个问题：我们要在后台执⾏完删除后加上：

AjaxResultresult=newAjaxResult();

Code="200";

e="操作成功";

FormatJsonResultjsonResult=newFormatJsonResult();

=result;

(Result());

();

不加上它callback会报错的。

在反审核的⾥⾯加了代码：callback="refreshTab"

href="ProjectManage/FinishedProject/?fuid={sid_fin}"

target="navTabTodo"

title="确定要反审核吗?"

callback="refreshTab">反审核

然后在添加了代码：

functionrefreshTab(){

('tab2').loadUrl("ProjectManage/FinishedProject/");

}

我们刷新tab⽤到了loadurl函数，使⽤局部刷新来做到。tab2是我们的tab的ID，根据情况可适当修改

对于分标签页的检索问题，开始我们⽤的是：

action="ProjectManage/FinishedProject/"

method="post">

这⾥我们的onsubmit⽤到了navTabSearch(this),这个是navTab的标签⽤的搜索⽅式，显然不适合我们的Tab标签。我们找到

navTabS关于成长的故事 earch(this)的源码：页中，发现他在执⾏此函数的时候function

navTabSearch(form){

(,$(form).rializeArray());

returnfal;

}

直接将整个navTab刷新了。这就是为什么每次点击查询总数全部刷新的原因，现在我们重新添加了函数：

functiontabSearch(tab,form){

l(,$(form).rializeArray());

returnfal;

}

tabSearch可以将tab的Id传过来，然后执⾏l(),函数loadUrl()，是所有刷新函数的⽗函数，也就是说⽐如Reload()函数最终还是会调

⽤loadUrl()函数的。loadUrl()我们在aspx的js页中也多次使⽤它进⾏局部刷新。

他可以做到只刷新指定的容器，⽐如现在我们只刷新Tab容器。将Tab的Id传过来我们使⽤了('tab2')这样将修改后的ID传过来了。

在做检索和⾼级检索的时候我们要在后台写上格式类似于：

Listdflist=newList();

if(["ProState"]!=""&&

["ProState"]!=null)

{

DataFilterdf=newDataFilter();

="string";

="ProState";

=["ProState"];

(df);

}

if(["ProScale"]!=""&&

["ProScale"]!=null)

{

DataFilterdf=newDataFilter();

="string";

="ProScale";

=["ProScale"];

(df);

}

，别忘了在前台也要写上：

["ProName"].ToString()%>"/>

value="<%=["ProState"]==null?"":["ProState"].ToString()

%>"/>

，再将每⼀个参数对应的input加到form中，当然这只是我写的⼀个例⼦，具体的情况要具体确定的。

这样我们才可以在点击翻页的时候同时将参数传过去。

当Target=dialog的时候我们不能直接写callback="refreshTab"然后将refreshTab放到页中定义，⽐如在第⼀个Tab中点击添加的时

候，当dialog关闭的时候会同时刷新当前的Tab,我们的做法是：

在弹出的dialog的后台cs中写上：

AjaxResultresult=newAjaxResult();

Code="200";

e="操作成功";

FormatJsonResultjsonResult=new

FormatJsonResult();

=result;

(Result());

();

跟刚才是⼀样的。只让它返回成功的字符串，在当前的Tab中target=“dialog”中添加了callback="functioncallback()

{

('tab1').loadUrl('ProjectManage/FinishedProject/');

}"

只能这样写，函数的名字只能为callback,⽽且要将函数体写在aspx页⾯⾥⾯。