欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果

 更新時(shí)間:2022年04月27日 08:33:29   投稿:lijiao  
我們今天就一個(gè)具體的需求進(jìn)行分析,引出如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

今天做靜態(tài)頁(yè)面時(shí)有一個(gè)需求,就是頁(yè)面上有一組兩個(gè)選項(xiàng)的單選按鈕和一個(gè)有6行的列表(該列表用Table標(biāo)簽實(shí)現(xiàn),不是DIV),當(dāng)選擇單選按鈕的選項(xiàng)一時(shí),列表的前三條信息顯示后三條信息隱藏,當(dāng)選擇單選按鈕的選項(xiàng)二時(shí),列表的前三條信息隱藏后三條信息顯示。那么就牽扯出我們今天的話題拉,如何實(shí)現(xiàn)呢?實(shí)現(xiàn)后該實(shí)現(xiàn)還能應(yīng)用到哪些場(chǎng)景?

1、第一反應(yīng)的解決方案

碰到這個(gè)需求后,我第一反應(yīng)就是很簡(jiǎn)單啊,分別用兩個(gè)DIV將前三個(gè)Table中的TR標(biāo)簽與后三個(gè)TR標(biāo)簽包起來(lái),然后通過(guò)JS控制DIV的顯示。

第一步:使用DIV包裹需要隱藏顯示的TR。代碼如下:

<table> 
<div id="divName"> 
<tr> 
<td>姓名:</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</div> 
<div id="divSex"> 
<tr> 
<td>年齡:</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</div> 
</table> 

第二步:使用JS控制DIV的顯示,來(lái)達(dá)到控制隱藏或顯示行的效果:

$("#divName").style.display = "none";?
$("#divSex").style.display = "block";

第三步:運(yùn)行程序,你會(huì)發(fā)現(xiàn)根本不管用,哈哈,有點(diǎn)被耍的感覺(jué)~!因?yàn)門(mén)R標(biāo)簽只能與TABLE標(biāo)簽搭配使用!好啦,雖然上面的代碼不管用!但是還算起到了一個(gè)引導(dǎo)的作用吧,失敗是成功的老娘嘛!

2、推薦的使用panel解決方案

這是在我描述了DIV與TR不能配合使用后,被同事笑話啦,哎、看來(lái)以后要多多學(xué)習(xí)學(xué)習(xí)HTML啦,笑話完我后,同事董寧告訴我用PANEL控件包住TR,用Visible屬性在服務(wù)器級(jí)別控制TR的輸出。

第一步:使用PANEL控件包住用來(lái)顯示或隱藏的TR標(biāo)簽,代碼如下:

<table> 
<asp:Panel ID="plName" runat="server"> 
<tr> 
<td>姓名:</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</asp:Panel> 
<asp:Panel ID="plSex" runat="server" > 
<tr> 
<td>年齡:</td> 
<td><input id="txtsex" type="text" /></asp:Panel></td> 
</tr> 
</asp:Panel> 
</table> 

第二步:在服務(wù)器端使用Panel控件的Visible屬性控制行的輸出,代碼如下:

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
 string val = RadioButtonList1.SelectedValue; 
 switch (val) 
 { 
  case "Name": 
   plName.Visible = true; 
   plSex.Visible = false; 
   break; 
  case "Sex": 
   plName.Visible = false; 
   plSex.Visible = true; 
   break; 
  default: 
   plName.Visible = true; 
   plSex.Visible = true; 
   break; 
 } 
} 

這種方法雖然沒(méi)有問(wèn)題,但是感覺(jué)還是太無(wú)厘頭了吧?控制頁(yè)面展示的代碼也要讓服務(wù)器端去做嗎?太浪費(fèi)性能了!而且頁(yè)面控制的代碼與邏輯交互代碼放一起簡(jiǎn)直是混亂不堪啊,在否決掉這個(gè)辦法時(shí),我們的大俠歪歪同志登場(chǎng)了,說(shuō)道歪歪同志我不得不佩服啊,身為項(xiàng)目經(jīng)理的歪歪,寫(xiě)代碼的功底竟然比程序員還猛,完全無(wú)需代碼提示,純手工敲擊鍵盤(pán)加清晰思路完美解決該問(wèn)題!

3、無(wú)厘頭解決方案

那么,我們來(lái)看這個(gè)思路,首先給每個(gè)TR標(biāo)簽賦予一個(gè)class樣式,但是這個(gè)樣式是沒(méi)有實(shí)現(xiàn)的,僅僅做獲取該TR的標(biāo)識(shí)。

第一步:給TR標(biāo)簽添加一個(gè)沒(méi)有實(shí)現(xiàn)的class樣式。代碼如下:

<table id="MyList"> 
<tr class="NameCSS"> 
<td>姓名:</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
<tr class="SexCss"> 
<td>年齡:</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</table> 

第二步:使用Jquery根據(jù)class獲取TR元素,并且控制其隱藏或顯示,代碼如下:

var $rowsName = $("#MyList").find(".NameCSS"); 
var $rowsSex = $("#MyList").find(".SexCss"); 
switch (selectedValue) 
{ 
 case "Name": 
 $rowsSex.hide(); 
 $rowsName.show(); 
 break; 
 case "Sex": 
 $rowsSex.show(); 
 $rowsName.hide(); 
 break; 
} 

第三步:運(yùn)行,完全沒(méi)有問(wèn)題,此問(wèn)題解決!

4、根據(jù)第三個(gè)方案的實(shí)現(xiàn)聯(lián)想的應(yīng)用場(chǎng)景

我們現(xiàn)在可以控制TABLE中TR的顯示與隱藏后,我們可以想到ASP.NET GridView控件在綁定數(shù)據(jù)后輸出到瀏覽器后的數(shù)據(jù)部分,也是用TR的形式來(lái)顯示的,那么我們可不可以控制GridView內(nèi)容的顯示與隱藏呢?當(dāng)然沒(méi)問(wèn)題了。

第一步:如何給GridView數(shù)據(jù)行加入class屬性呢?我們可以用GridView的行樣式(<RowStyle CssClass="test" />)來(lái)設(shè)置,代碼如下:

<asp:GridView ID="GridView1" runat="server"> 
<RowStyle CssClass="test" /> 
</asp:GridView> 

此時(shí)我們運(yùn)行頁(yè)面,查看頁(yè)面輸出的源代碼會(huì)看到GridView數(shù)據(jù)部分的所有TR都被賦予了一個(gè)class="test"屬性!

第二步:綁定數(shù)據(jù),代碼如下:

if (!IsPostBack) 
  { 
   List<Student> sList = new List<Student>() 
   { 
    new Student(){ SID = "s001", SName="張三", SSex="男"}, 
    new Student(){ SID = "s002", SName="李四", SSex="女"}, 
    new Student(){ SID = "s003", SName="王五", SSex="男"} 
   }; 
 
   GridView1.DataSource = sList; 
   GridView1.DataBind(); 
  } 
 } 

第三步:加入控制顯示或隱藏GridView數(shù)據(jù)的按鈕,代碼如下:

<input id="btn" type="button" value="隱藏" onclick="ShowDate()" />

第四步:實(shí)現(xiàn)控制顯示和隱藏的JS方法,代碼如下:

function ShowDate() { 
   var val = $("#btn").val(); 
   var $rows = $("#GridView1").find(".test"); 
   switch (val) { 
    case "隱藏": 
     $rows.hide(); 
     $("#btn").val("顯示"); 
     break; 
    case "顯示": 
     $rows.show(); 
     $("#btn").val("隱藏"); 
     break; 
   } 
  } 

呵呵,實(shí)現(xiàn)這個(gè)功能的原因、人物、靈感、整個(gè)前因后果就介紹完啦,編程嘛不僅是要實(shí)現(xiàn)功能,更要融于生活。

以上四個(gè)方法都是緊密相連,互相有聯(lián)系的,希望大家細(xì)細(xì)品味,仔細(xì)琢磨,真正成為自己的東西,運(yùn)用到學(xué)習(xí)中。

相關(guān)文章

最新評(píng)論