展开和折叠GridView行

相关文章推荐

腹黑的豆浆 · 【编写环境二】python库scipy.st ...· 7 月前 ·

高大的蟠桃 · 使用docker搭建最新版本的gitea，并 ...· 1 年前 ·

踢足球的领结 · git ...· 1 年前 ·

另类的地瓜 · 树莓派之蓝牙编程_树莓派蓝牙编程_夏中伟的博 ...· 1 年前 ·

才高八斗的碗 · Problem with .env ...· 1 年前 ·

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标签中。

< script type = " text/javascript " >

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 来达到流畅展开和折叠的效果。