[翻译] 展开和折叠GridView行
原文地址:http://www.codeproject.com/KB/webforms/GridViewExpandCollapse.aspx
代码下载:/Files/sunfishlu/GridViewExpandCollapse.rar
效果图:
![](http://www.codeproject.com/KB/webforms/GridViewExpandCollapse/preview.gif)
介绍
这篇文章介绍了使用JavaScript折叠/展开GridView行的功能,为了实现所希望的效果,我在GridView的表头放置了一张图片,当点击对应图片时,GridView将会折叠和展开行。
HTML代码
在GridView中添加一个模板列,把图片放到模板列中的HeaderTemplate中,此GridView的HTML代码如下:
Code
GridView的表头图片绑定onclick事件
Code
Code
代码下载:/Files/sunfishlu/GridViewExpandCollapse.rar
效果图:
![](http://www.codeproject.com/KB/webforms/GridViewExpandCollapse/preview.gif)
介绍
这篇文章介绍了使用JavaScript折叠/展开GridView行的功能,为了实现所希望的效果,我在GridView的表头放置了一张图片,当点击对应图片时,GridView将会折叠和展开行。
HTML代码
在GridView中添加一个模板列,把图片放到模板列中的HeaderTemplate中,此GridView的HTML代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
GridView的表头图片绑定onclick事件
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
JavaScript代码
把下面的代码放到script标签中。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
在上面的代码中,全局参数是在window.onload事件中初始化的。有三个方法:toogle ToogleImage和ToggleRows。Toogle方法响应一个click事件,它先找到表头中的图片,然后通过调用ToogleImage和ToggleRows来实现我们的目的。注意在ToggleRows方法中,为了实现一些动态的效果,我们重复使用了setTimeout方法。
为了在折叠展开中有一定的迟缓,每一次调用ToggleRows方法都设置了25毫秒,你可以根据需要改变TimeSpan的值。
总结
在这篇文章中,我使用了setTimeout
来达到流畅展开和折叠的效果。