使用jQuery实现ASP.NETGridView折叠伸展效果

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

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

1、第一反应的解决方案

碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示。

第一步:使用DIV包裹需要隐藏显示的TR。代码如下:

  1. <table> 
  2. <div id="divName"> 
  3. <tr> 
  4. <td>姓名:</td> 
  5. <td><input id="txtname" type="text" /></td> 
  6. </tr> 
  7. </div> 
  8. <div id="divSex"> 
  9. <tr> 
  10. <td>年龄:</td> 
  11. <td><input id="txtsex" type="text" /></td> 
  12. </tr> 
  13. </div> 
  14. </table> 

第二步:使用JS控制DIV的显示,来达到控制隐藏或显示行的效果:

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

第三步:运行程序,你会发现根本不管用,哈哈,有点被耍的感觉~!因为TR标签只能与TABLE标签搭配使用!好啦,虽然上面的代码不管用!但是还算起到了一个引导的作用吧,失败是成功的老娘嘛!

2、同事推荐的使用panel解决方案

这是在我描述了DIV与TR不能配合使用后,被同事笑话啦,哎、看来以后要多多学习学习HTML啦,笑话完我后,同事董宁告诉我用PANEL控件包住TR,用Visible属性在服务器级别控制TR的输出。

第一步:使用PANEL控件包住用来显示或隐藏的TR标签,代码如下:

  1. <table> 
  2. <asp:Panel ID="plName" runat="server"> 
  3. <tr> 
  4. <td>姓名:</td> 
  5. <td><input id="txtname" type="text" /></td> 
  6. </tr> 
  7. </asp:Panel> 
  8. <asp:Panel ID="plSex" runat="server" > 
  9. <tr> 
  10. <td>年龄:</td> 
  11. <td><input id="txtsex" type="text" /></asp:Panel></td> 
  12. </tr> 
  13. </asp:Panel> 
  14. </table> 

第二步:在服务器端使用Panel控件的Visible属性控制行的输出,代码如下:

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

这种方法虽然没有问题,但是感觉还是太无厘头了吧?控制页面展示的代码也要让服务器端去做吗?太浪费性能了!而且页面控制的代码与逻辑交互代码放一起简直是混乱不堪啊,在否决掉这个办法时,我们的大侠歪歪同志登场了,说道歪歪同志我不得不佩服啊,身为项目经理的歪歪,写代码的功底竟然比程序员还猛,完全无需代码提示,纯手工敲击键盘加清晰思路完美解决该问题!

3、同事“歪歪”大侠的无厘头解决方案

那么,我们来看看歪歪的思路,首先给每个TR标签赋予一个class样式,但是这个样式是没有实现的,仅仅做获取该TR的标识。

第一步:给TR标签添加一个没有实现的class样式。代码如下:

  1. <table id="MyList"> 
  2. <tr class="NameCSS"> 
  3. <td>姓名:</td> 
  4. <td><input id="txtname" type="text" /></td> 
  5. </tr> 
  6. <tr class="SexCss"> 
  7. <td>年龄:</td> 
  8. <td><input id="txtsex" type="text" /></td> 
  9. </tr> 
  10. </table> 

第二步:使用Jquery根据class获取TR元素,并且控制其隐藏或显示,代码如下:

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

第三步:运行,完全没有问题,此问题解决!

4、根据歪歪大侠的实现联想的应用场景

我们现在可以控制TABLE中TR的显示与隐藏后,我们可以想到ASP.NET GridView控件在绑定数据后输出到浏览器后的数据部分,也是用TR的形式来显示的,那么我们可不可以控制GridView内容的显示与隐藏呢?当然没问题了。

第一步:如何给GridView数据行加入class属性呢?我们可以用GridView的行样式(<RowStyle CssClass="test" />)来设置,代码如下:

  1. <asp:GridView ID="GridView1" runat="server"> 
  2. <RowStyle CssClass="test" /> 
  3. </asp:GridView> 

此时我们运行页面,查看页面输出的源代码会看到GridView数据部分的所有TR都被赋予了一个class="test"属性!

第二步:绑定数据,代码如下:

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

第三步:加入控制显示或隐藏GridView数据的按钮,代码如下:

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

第四步:实现控制显示和隐藏的JS方法,代码如下:

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

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

原文链接:http://www.cnblogs.com/doubleliang/archive/2012/04/08/2438098.html

【编辑推荐】

  1. 用jQuery实现ASP.NET GridView折叠伸展效果
  2. Django与jQuery来创建电子表格应用程序
  3. jQuery命名冲突解决的五种方案
  4. 12个必要的jQuery表单插件
  5. 10个超赞的jQuery动态插件推荐

 

责任编辑:林师授 来源: 王波洋的博客
相关推荐

2012-04-09 10:34:21

jQuery

2009-07-24 15:35:00

ASP.NET Gri

2009-08-14 13:20:29

ASP.NET Gri

2013-07-05 10:26:40

Android

2012-02-08 17:01:36

2010-09-07 09:30:25

DIV弹出jQuery

2012-01-10 14:59:42

jQuery

2009-09-23 17:19:19

jQuery页面渐显效

2011-03-30 14:33:57

jQueryJavaScript

2011-03-02 13:15:26

HTML 5jQuery

2013-12-02 15:25:38

jQuery插件

2012-06-13 15:21:26

jQuery

2011-07-25 14:49:36

jQuery

2011-09-01 13:17:46

JQuery滚动

2012-07-18 20:59:40

jQuery

2012-03-01 14:35:46

ASP.NETjQuery UI

2009-06-16 10:44:50

JS代码折叠Visual Stud

2011-05-24 09:32:38

2012-12-04 10:52:03

CSS3Web

2012-09-07 10:02:53

点赞
收藏

51CTO技术栈公众号