展开和折叠GridView行

http://blog.csdn.net/lee576/article/details/3089677

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

介绍这篇文章介绍了使用JavaScript折叠/展开GridView行的功能，为了实现所希望的效果，我在GridView的表头放置了一张图片，当点击对应图片时，GridView将会折叠和展开行。
HTML代码在GridView中添加一个模板列，把图片放到模板列中的HeaderTemplate中，此GridView的HTML代码如下：

<asp:GridView ID="gvTab" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False" GridLines="Vertical" 2

ShowFooter="True"> 3

<Columns> 4

<asp:TemplateField> 5

<HeaderStyle Width="25px"/> 6

<ItemStyle Width="25px" BackColor="White"/> 7

<HeaderTemplate> 8

<asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/minus.gif" 9

ToolTip="Collapse"/>10

</HeaderTemplate>11

</asp:TemplateField>12

<asp:BoundField HeaderText="n" DataField="n">13

<HeaderStyle Width="25px"/>14

<ItemStyle Width="25px"/>15

</asp:BoundField>16

<asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">17

<HeaderStyle Width="150px"/>18

<ItemStyle Width="150px"/>19

</asp:BoundField>20

<asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">21

<HeaderStyle Width="150px"/>22

<ItemStyle Width="150px"/>23

</asp:BoundField>24

</Columns>25

<HeaderStyle Height="25px" Font-Bold="True" BackColor="DimGray" ForeColor="White" HorizontalAlign="Center"26

VerticalAlign="Middle"/>27

<RowStyle Height="25px" BackColor="Gainsboro" HorizontalAlign="Center" VerticalAlign="Middle"/>28

<AlternatingRowStyle Height="25px" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle"/>29

<FooterStyle BackColor="Gray"/>30

</asp:GridView>31

GridView的表头图片绑定onclick事件

<asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/minus.gif" ToolTip="Collapse"/>

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

var Grid =null;

var UpperBound =0;

var LowerBound =1;

var CollapseImage ='minus.gif';

var ExpandImage ='plus.gif';

var IsExpanded =true;

var Rows =null;

var n =1;

var TimeSpan =25;

window.onload =function()

{

Grid = document.getElementById('<%= this.gvTab.ClientID %>');

UpperBound = parseInt('<%= this.gvTab.Rows.Count %>');

Rows = Grid.getElementsByTagName('tr');

}

function Toggle(Image)

{

ToggleImage(Image);

ToggleRows();

}

function ToggleImage(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;

}

function ToggleRows()

{

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

Rows[n].style.display = Rows[n].style.display ==''?'none' : '';

if(IsExpanded) n--; else n++;

setTimeout("ToggleRows()",TimeSpan);

}

</script>

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