GridView固定表头实例：横向滚动与纵向固定
3星 · 超过75%的资源 需积分: 31 157 浏览量
更新于2024-09-11
收藏 21KB DOCX 举报 "该资源提供了一个关于在ASP.NET中使用GridView控件实现固定表头、横向滚动和纵向固定的实例。主要涉及的技术点包括CSS样式、GridView属性设置以及可能遇到的问题和解决方案。"
在Web开发中，GridView是一个常用的数据展示控件，特别是在ASP.NET中。在处理大量数据时，为了保持数据的可读性，我们经常需要实现表格的滚动功能，同时保持表头固定。本实例展示了如何在VS2010中使用C#来实现这一需求。
首先，问题1是关于如何固定GridView的表头。通过CSS样式设置可以解决这个问题。在HTML部分，我们可以为表头的th元素添加以下样式：
```css
th {
position: relative;
}
```
这将使表头相对定位，以便在页面滚动时，表头相对于其父元素的位置保持不变。
然而，仅设置`position: relative;`还不足以实现横向滚动时表头随滚动条移动的效果。当切换到第二个tab然后再返回时，问题2出现，即GridView的分页表头消失。为了解决这个问题，我们需要进一步调整CSS，特别是关注`height`, `overflow`和`position`属性。在`.aspx`页面的`<head>`部分添加以下CSS：
```css
th {
position: relative;
top: expression(this.offsetParent.scrollTop);
}
```
这里使用了`top: expression(this.offsetParent.scrollTop);`来动态更新表头的位置，使其在用户滚动时保持在视口顶部。`expression`是Internet Explorer特有的JavaScript语法，它允许CSS属性与JavaScript表达式关联。
在HTML结构方面，注意使用了`<iewc:TabStrip>`和`<iewc:MultiPage>`控件来创建tab页面，这可能来自某个第三方控件库，如Telerik或DevExpress。这些控件用于实现tabbed界面，每个tab包含不同的内容，比如一个GridView和一个Chart。
这个实例展示了在ASP.NET环境中使用CSS和GridView控件属性实现表格固定表头、横向滚动和纵向固定的具体方法。开发者可以根据这个例子，结合自己的项目需求进行适当的修改和扩展，以适应不同的布局和样式要求。在实际应用中，可能还需要考虑兼容性问题，特别是对于非IE浏览器，可能需要使用更现代的CSS解决方案，例如使用Flexbox或CSS Grid来替代`expression`。
将自己遇到的问题以实例形式写出来，以免以后再被同样的问题困扰
情况描述： 页面中有 2 个 tab，第一个 tab 是 gridview 绑定数据，第 2 个 tab 是 chart 绑定
问题 1. gridview 表头固定问题 解决 设置属性
问题 2. gridview 纵向滚动条向下拉一点，切换到第 2 个 tab,再切换回来的时候，gridview 分页的表头不见
了，解决办法如下：
（重点在于 height ,overflow 与 position 这几个属性的设置,与 chart 那个 tab 的设置没关系）
. aspx 页面
!
"#"#$%
!&'&'(()&
($''*
+
(!!)$%",-$.&
./#&,!#'!,!#'011!!2&,!#'
(.3',&!#!4&%,0..35$
0367819($.',&0..35$
($.',&0..35$&,/
&:%&$
(!查询列表
(!图表
(!
下载后可阅读完整内容，剩余4页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2013-07-25 上传
2013-08-06 上传
1218 浏览量
2011-06-27 上传
2008-12-08 上传
2013-01-04 上传
