怎么用jQuery實現ASP.NET GridView折疊伸展效果

這篇文章主要講解了“怎么用jQuery實現ASP.NET GridView折疊伸展效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用jQuery實現ASP.NET GridView折疊伸展效果”吧！

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

碰到這個需求后，我***反應就是很簡單啊，分別用兩個DIV將前三個Table中的TR標簽與后三個TR標簽包起來，然后通過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的顯示，來達到控制隱藏或顯示行的效果：

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

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

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

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

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

<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>

第二步：在服務器端使用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;      }  }

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

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

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

***步：給TR標簽添加一個沒有實現的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根據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;  }

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

4、根據歪歪大俠的實現聯想的應用場景

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

***步：如何給GridView數據行加入class屬性呢？我們可以用GridView的行樣式（<RowStyle CssClass="test" />）來設置，代碼如下：

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

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

第二步：綁定數據，代碼如下：

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數據的按鈕,代碼如下：

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

第四步：實現控制顯示和隱藏的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;              }          }

感謝各位的閱讀，以上就是“怎么用jQuery實現ASP.NET GridView折疊伸展效果”的內容了，經過本文的學習后，相信大家對怎么用jQuery實現ASP.NET GridView折疊伸展效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！