展开和折叠GridView行_ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

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

效果图：

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

<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>
GridView的表头图片绑定onclick事件

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

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

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

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>

GridViewExpandCollapse.rar

(责任编辑：admin)

Dropdownlist在新窗口打开页面	asp.net导出Excel/Csv格式数据最优方案(C#)
GridView中DataKeyNames存储数据键值	Gridview绑定一个数据库中的表,对其一列进行超链接
Repeater中使用CheckBox完成全选	遍历Gridview foreach
DevExpress Asp.net ASPxTreeList的基本使用之一	AspxTreeList的用法
datalist分页	用Repeater实现GridView编辑模版的效果
将DataGrid升级到GridView的具体方法	RadioButton控件分组
DataList CheckBox多选删除时处理方法	当Asp.Net验证控件遇到FCKeditor
AspxGridView中全选、超链、打开窗口、文本编辑器	AspNetPager为DataList分页
ASPxGridView之ASPxGridViewExporter	DataList嵌套DataList(使用DataRelation实现纯代码)

ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

热门标签

展开和折叠GridView行

Tags：GridView 展开和折叠