如何用jQuery实现ASP.NET GridView折叠伸展效果

前端技术 2023/09/01 JavaScript

今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有6行的列表（该列表用Table标签实现，不是DIV），当选择单选按钮的选项一时，列表的前三条信息显示后三条信息隐藏，当选择单选按钮的选项二时，列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉，如何实现呢？实现后该实现还能应用到哪些场景？

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

呵呵，实现这个功能的原因、人物、灵感、整个前因后果就介绍完啦，编程嘛不仅是要实现功能，更要融于生活。

以上四个方法都是紧密相连，互相有联系的，希望大家细细品味，仔细琢磨，真正成为自己的东西，运用到学习中。

本文地址：https://www.stayed.cn/item/2984

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案