VS2010 C# 实现GridView固定表头与滚动问题详解
需积分: 50 90 浏览量
更新于2024-09-11
收藏 21KB DOCX 举报
在本实例中，我们将探讨如何在ASP.NET的GridView控件中实现固定表头功能，同时允许表格在水平方向上滚动而保持表头固定。这个实例是针对Visual Studio 2010中的C#项目，并且遇到了两个主要问题。
首先，问题1涉及到GridView表头的固定。通常情况下，Gridview表头默认是随滚动条一起移动的。为了解决这个问题，需要将表格中的表头单元格(th)的CSS样式设置为相对定位(position:relative)，这使得表头相对于其父元素进行定位，而不是跟随整个网格滚动。代码片段中提到的`position:relative`属性就是关键，它确保了表头在用户拖动横向滚动条时始终保持在顶部。
然而，问题2更复杂，当用户在页面上切换到包含Chart控件的第二个tab后，再回到GridView时，可能会发现GridView的分页表头消失了。这个问题的出现可能与高度、溢出和位置属性有关。解决方法是在.aspx页面的<head>部分添加一个CSS样式，使用`top:expression(this.offsetParent.scrollTop)`来动态计算表头的垂直位置，使其跟随表格主体一起滚动。这通过调整th元素的top值来实现，当滚动条改变时，表头会自动更新其位置，确保始终可见。
在HTML结构上，有一个TabStrip控件用于切换不同的页面区域，GridView和Chart分别位于不同的tabpanel内。当用户在TabStrip之间切换时，关键在于调整GridView所在tabpanel的CSS属性，特别是height、overflow和position，以确保表头的正确显示。
总结起来，本实例展示了如何通过CSS定位和JavaScript表达式来实现GridView在VS2010的C#项目中的固定表头功能，以及处理当用户在页面间切换时可能出现的表头同步问题。这些技巧对于开发具有复杂滚动和导航功能的Web应用程序非常实用，可以提升用户体验并确保信息的连续性和一致性。
将自己遇到的问题以实例形式写出来，以免以后再被同样的问题困扰
情况描述： 页面中有 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-08-06 上传
1217 浏览量
点击了解资源详情
2007-10-22 上传
2011-04-27 上传
2012-06-28 上传
2012-10-26 上传
Hannah
- 粉丝: 23
- 资源: 17
我的内容管理
展开
最新资源
- 黑板风格计算机毕业答辩PPT模板下载
- CodeSandbox实现ListView快速创建指南
- Node.js脚本实现WXR文件到Postgres数据库帖子导入
- 清新简约创意三角毕业论文答辩PPT模板
- DISCORD-JS-CRUD：提升 Discord 机器人开发体验
- Node.js v4.3.2版本Linux ARM64平台运行时环境发布
- SQLight：C++11编写的轻量级MySQL客户端
- 计算机专业毕业论文答辩PPT模板
- Wireshark网络抓包工具的使用与数据包解析
- Wild Match Map: JavaScript中实现通配符映射与事件绑定
- 毕业答辩利器：蝶恋花毕业设计PPT模板
- Node.js深度解析：高性能Web服务器与实时应用构建
- 掌握深度图技术：游戏开发中的绚丽应用案例
- Dart语言的HTTP扩展包功能详解
- MoonMaker: 投资组合加固神器，助力$GME投资者登月
- 计算机毕业设计答辩PPT模板下载
