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

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

创新互联建站专业为企业提供伊通网站建设、伊通做网站、伊通网站设计、伊通网站制作等企业网站建设、网页设计与制作、伊通企业网站模板建站服务，十年伊通做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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.

第三步：运行程序，你会发现根本不管用，哈哈，有点被耍的感觉~！因为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.

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

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

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

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

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

第二步：使用Jquery根据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、根据歪歪大侠的实现联想的应用场景

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

***步：如何给GridView数据行加入class属性呢？我们可以用GridView的行样式（）来设置，代码如下：

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.

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

第二步：绑定数据，代码如下：

 
 
 
    
  
  
  
  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数据的按钮,代码如下：

 
 
 
    
  
  
  
    2.

第四步：实现控制显示和隐藏的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.

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

网页题目：用jQuery实现ASP.NETGridView折叠伸展效果
转载源于：http://www.shufengxianlan.com/qtweb/news36/164636.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

响应式网站知识

同城分类信息

微信小程序　　 　成都服务器租用　　 　瑞杰企业管理　　 　重庆机房托管　　 　网站优化排名　　 　成都网页设计　　 　宜宾冠赛网站　　 　航空文化传媒　　 　普特斯腐植酸　　 　雅安做网站　　 　益鑫餐饮　　 　app软件开发公司　　 　网站seo　　 　响应式报价　　 　java虚拟主机　　 　网站建设推广　　 　四川广汉锦华　　 　交互设计　　 　高端网站设计　　 　成都微信开发