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

yibin 2015-02-09 建站源码 511

今天做静态页面时有一个需求,就是页面上有一组两个选项的单选按钮和一个有6行的列表(该列表用Table标签实现,不是DIV),当选择单选按钮 的选项一时,列表的前三条信息显示后三条信息隐藏,当选择单选按钮的选项二时,列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉,如何 实现呢?实现后该实现还能应用到哪些场景
1、第一反应的解决方案
碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示。
第一步:使用DIV包裹需要隐藏显示的TR。代码如下:

双击代码全选
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15
<pre class="brush:html;toolbar:false;"><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></pre><p>

</p>


 

第二步:使用JS控制DIV的显示,来达到控制隐藏或显示行的效果
双击代码全选
1

2
$("#divName").style.display = "none"

$("#divSex").style.display = "block";


 
第三步:运行程序,你会发现根本不管用,哈哈,有点被耍的感觉~!因为TR标签只能与TABLE标签搭配使用!好啦,虽然上面的代码不管用!但是还算起到了一个引导的作用吧,失败是成功的老娘嘛!
2、同事推荐的使用panel解决方案
这是在我描述了DIV与TR不能配合使用后,被同事笑话啦,哎、看来以后要多多学习学习HTML啦,笑话完我后,同事董宁告诉我用PANEL控件包住TR,用Visible属性在服务器级别控制TR的输出。
第一步:使用PANEL控件包住用来显示或隐藏的TR标签,代码如下:
双击代码全选
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15
<pre class="brush:html;toolbar:false;"><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></pre><p>

</p>


 

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19
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样式。代码如下:
双击代码全选
1

2

3

4

5

6

7

8

9

10

11
<pre class="brush:html;toolbar:false;"><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></pre><p>

</p>


 

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

2

3

4

5

6

7

8

9

10

11

12

13

14
<pre class="brush:js;toolbar:false;">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

}</pre><p>

</p>


 

第三步:运行,完全没有问题,此问题解决!
4、根据歪歪大侠的实现联想的应用场景
我们现在可以控制TABLE中TR的显示与隐藏后,我们可以想到ASP.NET GridView控件在绑定数据后输出到浏览器后的数据部分,也是用TR的形式来显示的,那么我们可不可以控制GridView内容的显示与隐藏呢?当然没问题了。
第一步:如何给GridView数据行加入class属性呢?我们可以用GridView的行样式(<RowStyle CssClass="test" />)来设置,代码如下:
双击代码全选
1

2

3

4
<pre class="brush:js;toolbar:false;"><asp:GridView ID="GridView1" runat="server">

<RowStyle CssClass="test" />

</asp:GridView></pre><p>

</p>


 

此时我们运行页面,查看页面输出的源代码会看到GridView数据部分的所有TR都被赋予了一个class="test"属性!
第二步:绑定数据,代码如下:
双击代码全选
1

2

3

4

5

6

7

8

9

10

11

12

13

14
<pre class="brush:js;toolbar:false;">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(); 

     

 }</pre><p>

</p>


 

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

2
<pre class="brush:html;toolbar:false;"><input id="btn" type="button" value="隐藏"  onclick="ShowDate()" /></pre><p>

</p>


 

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15
<pre class="brush:js;toolbar:false;">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

            

        }</pre><p>

</p>


 

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

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询