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

        今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有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.cnblogs.com/doubleliang/archive/2012/04/08/2438098.html