展开和折叠GridView行

原文地址： http://www.codeproject.com/KB/webforms/GridViewExpandCollapse.aspx
代码下载: /Files/sunfishlu/GridViewExpandCollapse.rar
效果图：



介绍
这篇文章介绍了使用JavaScript折叠/展开GridView行的功能，为了实现所希望的效果，我在GridView的表头放置了一张图片，当点击对应图片时，GridView将会折叠和展开行。

HTML代码
在GridView中添加一个模板列，把图片放到模板列中的HeaderTemplate中，此GridView的HTML代码如下：

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<asp:GridViewID="gvTab"BackColor="WhiteSmoke"runat="server"AutoGenerateColumns="False"GridLines="Vertical"
2ShowFooter="True">
3<Columns>
4<asp:TemplateField>
5<HeaderStyleWidth="25px"/>
6<ItemStyleWidth="25px"BackColor="White"/>
7<HeaderTemplate>
8<asp:ImageID="imgTab"onclick="javascript:Toggle(this);"runat="server"ImageUrl="~/minus.gif"
9ToolTip="Collapse"/>
10</HeaderTemplate>
11</asp:TemplateField>
12<asp:BoundFieldHeaderText="n"DataField="n">
13<HeaderStyleWidth="25px"/>
14<ItemStyleWidth="25px"/>
15</asp:BoundField>
16<asp:BoundFieldHeaderText="sqrt(n)"DataField="sqrtn">
17<HeaderStyleWidth="150px"/>
18<ItemStyleWidth="150px"/>
19</asp:BoundField>
20<asp:BoundFieldHeaderText="qbrt(n)"DataField="qbrtn">
21<HeaderStyleWidth="150px"/>
22<ItemStyleWidth="150px"/>
23</asp:BoundField>
24</Columns>
25<HeaderStyleHeight="25px"Font-Bold="True"BackColor="DimGray"ForeColor="White"HorizontalAlign="Center"
26VerticalAlign="Middle"/>
27<RowStyleHeight="25px"BackColor="Gainsboro"HorizontalAlign="Center"VerticalAlign="Middle"/>
28<AlternatingRowStyleHeight="25px"BackColor="LightGray"HorizontalAlign="Center"VerticalAlign="Middle"/>
29<FooterStyleBackColor="Gray"/>
30</asp:GridView>
31

GridView的表头图片绑定onclick事件

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><asp:ImageID="imgTab"onclick="javascript:Toggle(this);"runat="server"ImageUrl="~/minus.gif"ToolTip="Collapse"/>

JavaScript代码
把下面的代码放到script标签中。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
varGrid=null;
varUpperBound=0;
varLowerBound=1;
varCollapseImage='minus.gif';
varExpandImage='plus.gif';
varIsExpanded=true;
varRows=null;
varn=1;
varTimeSpan=25;

window.onload=function()
{
Grid=document.getElementById('<%=this.gvTab.ClientID%>');
UpperBound=parseInt('<%=this.gvTab.Rows.Count%>');
Rows=Grid.getElementsByTagName('tr');
}

functionToggle(Image)
{
ToggleImage(Image);
ToggleRows();
}

functionToggleImage(Image)
{
if(IsExpanded)
{
Image.src=ExpandImage;
Image.title='Expand';
Grid.rules='none';
n=LowerBound;

IsExpanded=false;
}
else
{
Image.src=CollapseImage;
Image.title='Collapse';
Grid.rules='cols';
n=UpperBound;

IsExpanded=true;
}
}

functionToggleRows()
{
if(n<LowerBound||n>UpperBound)return;

Rows[n].style.display=Rows[n].style.display==''?'none':'';
if(IsExpanded)n--;elsen++;
setTimeout("ToggleRows()",TimeSpan);
}
</script>

在上面的代码中，全局参数是在window.onload事件中初始化的。有三个方法：toogle ToogleImage和ToggleRows。Toogle方法响应一个click事件，它先找到表头中的图片，然后通过调用ToogleImage和ToggleRows来实现我们的目的。注意在ToggleRows方法中，为了实现一些动态的效果，我们重复使用了setTimeout方法。
为了在折叠展开中有一定的迟缓，每一次调用ToggleRows方法都设置了25毫秒，你可以根据需要改变TimeSpan的值。

总结
在这篇文章中，我使用了setTimeout来达到流畅展开和折叠的效果。