当前位置:编程学习 > asp >>

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

今天做静态页面时有一个需求,就是页面上有一组两个选项的单选按钮和一个有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="txt易做图" 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="txt易做图" 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="txt易做图" 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.       

补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,