可滚动 GridView

• 下载源代码 - 1.94 KB

引言

本文旨在展示如何使用 JavaScript 文件以及 <div> 和 CSS 类表头模板来创建一个带有固定表头的可滚动 GridView。

背景

我一直在寻找一种创建带有固定/浮动表头的可滚动 GridView 的方法。我发现许多实现都存在一些缺陷。不要误解我，我不是专家；但是，我找到的解决方案要么不支持调整页面大小，要么不允许将 GridView 放置在页面顶部以外的任何位置。

Using the Code

首先，我们需要创建一个 GridView 并用几行数据填充它（足以允许它滚动，几百行就足够了）。以下代码只是一个示例，需要针对您可能使用的数据源进行修改。

<div id="GridviewDiv" 
  style="width: 100%; height: 80%; overflow: auto; position: absolute; left: 0px;">
<table id="fakeheader" style="position: absolute"> </table>
// note you'll have to set your datasource, or populate the gridview with rows.
<asp:GridView Id="GridView1" runat="server">
<HeaderStyle CssClass = "FixedHeader" BackColor="#5D7B9D" 
   Font-Bold="True" ForeColor="White"/> // feel free to modify the color scheme
</asp:GridView>
</div>

前面的片段展示了如何用 div 标签包装您的 GridView。 overflow 必须设置为 auto，position 设置为 absolute。 然后，我们创建一个用于 JavaScript 的虚假表头。 这会创建使我们的表头看起来像是固定的魔法。 现在，我们需要创建一个表头样式 CSS 类。

<style type="text/css">
.FixedHeader {font-weight:bold; background-color: Green; position:relative; 
   top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
</style> 

这应该允许您拥有一个固定的表头和一个可滚动的 GridView；但是，固定的表头将不支持页面大小调整。 这就是 JavaScript 文件的用途。 因此，接下来，我们实现 JavaScript。 您需要下载 JavaScript 文件并将其添加到当前文件夹。 在 ASP 页面的顶部，您需要引用该文件。 像这样...

<script language="javascript" type="text/javascript">
   InitializeFixedHeader("GridView1"); // you'll need to pass in the control Id.
</script> 

请注意，我没有创建此脚本；但是，我已经修改了它以适应我的应用程序的需求。 源的全部功劳应归于 Paul，他的文章位于此处：http://www.developer.com/lang/jscript/article.php/3696921。 我现在不打算详细介绍 JavaScript 文件；但是，将接受问题并尽我所能地回答。 随时给我发电子邮件或发布任何问题。 如果您设法将此拼凑起来并使其正常工作，您会注意到表头位于固定位置，并且 GridView 滚动，最重要的是，您应该能够调整页面大小，并且表头也会调整。 我有一个可用的版本，并希望能够提出我可以分发的东西。 同时，如果遇到问题，我会尽力提供帮助。

顺便说一句，这是我加入 CodeProject 以来的第一篇文章。 我相信它不是最好的；但是，我希望它可以为遇到相同问题的人们提供一些帮助。 我相信任何进一步的帖子都会变得更好、更深入。

关注点

我不确定与其他浏览器的兼容性，我测试过的只有 IE。