展开和折叠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"/>
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>
代码下载:/Files/sunfishlu/GridViewExpandCollapse.rar
效果图：
介绍
这篇文章介绍了使用JavaScript折叠/展开GridView行的功能，为了实现所希望的效果，我在GridView的表头放置了一张图片，当点击对应图片时，GridView将会折叠和展开行。
HTML代码
在GridView中添加一个模板列，把图片放到模板列中的HeaderTemplate中，此GridView的HTML代码如下：
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
GridView的表头图片绑定onclick事件
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
JavaScript代码
把下面的代码放到script标签中。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
在上面的代码中，全局参数是在window.onload事件中初始化的。有三个方法：toogle
ToogleImage和ToggleRows。Toogle方法响应一个click事件，它先找到表头中的图片，然后通过调用ToogleImage和ToggleRows来实现我们的目的。注意在ToggleRows方法中，为了实现一些动态的效果，我们重复使用了setTimeout方法。
为了在折叠展开中有一定的迟缓，每一次调用ToggleRows方法都设置了25毫秒，你可以根据需要改变TimeSpan的值。
总结
在这篇文章中，我使用了setTimeout来达到流畅展开和折叠的效果。