日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用jQuery實現(xiàn)ASP.NETGridView折疊伸展效果

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

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供伊通網(wǎng)站建設、伊通做網(wǎng)站、伊通網(wǎng)站設計、伊通網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、伊通企業(yè)網(wǎng)站模板建站服務，十年伊通做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

1、***反應的解決方案

碰到這個需求后，我***反應就是很簡單啊，分別用兩個DIV將前三個Table中的TR標簽與后三個TR標簽包起來，然后通過JS控制DIV的顯示。

***步：使用DIV包裹需要隱藏顯示的TR。代碼如下：

 
 
 
    
  
  
  
  14. 
  
  
  
  
  
  
    
  
  
  姓名：
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
    
  
  
  年齡：
  
  
  
  
  
  
    
  
  
  
  
  
  
    15.

第二步：使用JS控制DIV的顯示，來達到控制隱藏或顯示行的效果：

 
 
 
    
  
  
  
  1. $("#divName").style.display = "none"; 
    2. 
  
  
  
  2. $("#divSex").style.display = "block";
    3.

第三步：運行程序，你會發(fā)現(xiàn)根本不管用，哈哈，有點被耍的感覺~！因為TR標簽只能與TABLE標簽搭配使用！好啦，雖然上面的代碼不管用！但是還算起到了一個引導的作用吧，失敗是成功的老娘嘛！

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

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

***步：使用PANEL控件包住用來顯示或隱藏的TR標簽，代碼如下：

 
 
 
    
  
  
  
  14. 
  
  
  
  
  
  
    
  
  
  姓名：
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
    
  
  
  年齡：
  
  
  
  
  
  
    
  
  
  
  
  
  
    15.

第二步：在服務器端使用Panel控件的Visible屬性控制行的輸出，代碼如下：

 
 
 
    
  
  
  
  1. protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) 
    2. 
  
  
  
  2. { 
    3. 
  
  
  
  3.     string val = RadioButtonList1.SelectedValue; 
    4. 
  
  
  
  4.     switch (val) 
    5. 
  
  
  
  5.     { 
    6. 
  
  
  
  6.         case "Name": 
    7. 
  
  
  
  7.             plName.Visible = true; 
    8. 
  
  
  
  8.             plSex.Visible = false; 
    9. 
  
  
  
  9.             break; 
    10. 
  
  
  
  10.         case "Sex": 
    11. 
  
  
  
  11.             plName.Visible = false; 
    12. 
  
  
  
  12.             plSex.Visible = true; 
    13. 
  
  
  
  13.             break; 
    14. 
  
  
  
  14.         default: 
    15. 
  
  
  
  15.             plName.Visible = true; 
    16. 
  
  
  
  16.             plSex.Visible = true; 
    17. 
  
  
  
  17.             break; 
    18. 
  
  
  
  18.     } 
    19. 
  
  
  
  19. }  
    20.

這種方法雖然沒有問題，但是感覺還是太無厘頭了吧？控制頁面展示的代碼也要讓服務器端去做嗎？太浪費性能了！而且頁面控制的代碼與邏輯交互代碼放一起簡直是混亂不堪啊，在否決掉這個辦法時，我們的大俠歪歪同志登場了，說道歪歪同志我不得不佩服啊，身為項目經(jīng)理的歪歪，寫代碼的功底竟然比程序員還猛，完全無需代碼提示，純手工敲擊鍵盤加清晰思路***解決該問題！

3、同事“歪歪”大俠的無厘頭解決方案

那么，我們來看看歪歪的思路，首先給每個TR標簽賦予一個class樣式，但是這個樣式是沒有實現(xiàn)的，僅僅做獲取該TR的標識。

***步：給TR標簽添加一個沒有實現(xiàn)的class樣式。代碼如下：

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3. 姓名：
    4. 
  
  
  
    5. 
  
  
  
  5. 
  
  
  
    7. 
  
  
  
  7. 年齡：
    8. 
  
  
  
    9. 
  
  
  
  9. 
  
  
  
  10.

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

 
 
 
    
  
  
  
  1. var $rowsName = $("#MyList").find(".NameCSS"); 
    2. 
  
  
  
  2. var $rowsSex = $("#MyList").find(".SexCss"); 
    3. 
  
  
  
  3. switch (selectedValue)  
    4. 
  
  
  
  4. { 
    5. 
  
  
  
  5.    case "Name": 
    6. 
  
  
  
  6.     $rowsSex.hide(); 
    7. 
  
  
  
  7.     $rowsName.show(); 
    8. 
  
  
  
  8.     break; 
    9. 
  
  
  
  9.    case "Sex": 
    10. 
  
  
  
  10.     $rowsSex.show(); 
    11. 
  
  
  
  11.     $rowsName.hide(); 
    12. 
  
  
  
  12.     break; 
    13. 
  
  
  
  13. }
    14.

第三步：運行，完全沒有問題，此問題解決！

4、根據(jù)歪歪大俠的實現(xiàn)聯(lián)想的應用場景

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

***步：如何給GridView數(shù)據(jù)行加入class屬性呢？我們可以用GridView的行樣式（）來設置，代碼如下：

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.

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

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

 
 
 
    
  
  
  
  1. if (!IsPostBack) 
    2. 
  
  
  
  2.      { 
    3. 
  
  
  
  3.          List sList = new List() 
    4. 
  
  
  
  4.          { 
    5. 
  
  
  
  5.              new Student(){ SID = "s001", SName="張三", SSex="男"}, 
    6. 
  
  
  
  6.              new Student(){ SID = "s002", SName="李四", SSex="女"}, 
    7. 
  
  
  
  7.              new Student(){ SID = "s003", SName="王五", SSex="男"} 
    8. 
  
  
  
  8.          }; 
    9. 
  
  
  
  9. 
  
  
  
  10.          GridView1.DataSource = sList; 
    11. 
  
  
  
  11.          GridView1.DataBind(); 
    12. 
  
  
  
  12.      } 
    13. 
  
  
  
  13.  }
    14.

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

 
 
 
    
  
  
  
    2.

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

 
 
 
    
  
  
  
  1. function ShowDate() { 
    2. 
  
  
  
  2.             var val = $("#btn").val(); 
    3. 
  
  
  
  3.             var $rows = $("#GridView1").find(".test"); 
    4. 
  
  
  
  4.             switch (val) { 
    5. 
  
  
  
  5.                 case "隱藏": 
    6. 
  
  
  
  6.                     $rows.hide(); 
    7. 
  
  
  
  7.                     $("#btn").val("顯示"); 
    8. 
  
  
  
  8.                     break; 
    9. 
  
  
  
  9.                 case "顯示": 
    10. 
  
  
  
  10.                     $rows.show(); 
    11. 
  
  
  
  11.                     $("#btn").val("隱藏"); 
    12. 
  
  
  
  12.                     break; 
    13. 
  
  
  
  13.             } 
    14. 
  
  
  
  14.         }
    15.

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


當前文章：用jQuery實現(xiàn)ASP.NETGridView折疊伸展效果
分享地址：http://www.5511xx.com/article/dpccssc.html