ASP.NET DataGrid 固定表头

引言

一个常见的需求是创建一个 DataGrid 列表，它可以包含很多行（例如，账户联系人列表），具有固定的最大高度，并在行数超过可用空间时显示滚动条。这很容易通过将 DataGrid 放在一个 DIV 标签内来实现。

<DIV style="OVERFLOW: auto; HEIGHT: 
120px">
<asp:DataGrid ...
</DIV>

然后，客户提出的下一个需求是拥有 一个带有固定列标题的滚动体，这样用户就不需要记住哪一列包含什么内容。可以使用如下 style 来创建一个始终保持在视图中且不会滚动的固定表头：

<style type="text/css">
<!--
.DataGridFixedHeader {background-color: white; position:relative; top:expression(this.offsetParent.scrollTop);}
-->
</style>

需要背景颜色来隐藏滚动到表头行下方的行数据。确保 style 位于单行上，因为表达式在 style 定义使用多行时可能无法正常工作。

使用 HeaderStyle 元素将新的表头样式应用于 DataGrid：

<asp:DataGrid id="dgContacts" runat="server" ... >
...
<HeaderStyle CssClass="ms-formlabel DataGridFixedHeader"></HeaderStyle>
...

请注意，您可以在 CssClass 属性中使用多个类来组合多个样式，以便在您的网页中实现重用，或者将它们与您不拥有的样式（例如 SharePoint 样式）结合使用。

还有其他一些关于如何实现固定表头行的建议，例如在 DataGrid 上方放置一个单独的表格，但这会带来对齐和列宽问题，例如，当表格单元格包含不间断内容时。它也会在更改 DataGrid 的列时增加更多的工作量。本文中的 style 解决方案，却尽可能简单。

支持的浏览器

此解决方案基于 CSS 表达式，适用于 MSIE 5.x 和 6.x。它是纯客户端的，不应干扰服务器端代码（除了添加 style），但如果您的页面中有其他定位内容，它可能会表现出奇怪的行为。