当前位置：网学 > 编程文档 > ASP.net > 正文

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

作者：用户投稿来源：网络发布时间： 13/01/05

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

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();  
     }  
 }