怎么用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折叠伸展效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！