在 ASP.NET 上实现锁定表头、支持滚动的表格的做法

 

首先看看 CodeProject 上的两个东西

1、The Freeze Pane DataGrid （http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp）

利用文章中提到做法及代码，可以实现在 ASP.NET 1.1 上的、支持横向滚动与纵向滚动的表格，基本上是使用 CSS 实现的，比较简单。

在 ASP.NET 2.0 上，由于文档 HTML DOCKTYPE 发生了变化（HTML->XHTML），所以在使用原文中的横向滚动条会出现问题，但是使用纵向滚动条和锁定表头没有问题。

这种做法没有考虑页面 PostBack 时记录表格的滚动位置，使得用户不得不重新去寻找刚才选中/编辑的那条记录，这比较的不人性化。

2、ScrollingGrid: A cross-browser freeze-header two-way scrolling DataGrid（http://www.codeproject.com/aspnet/ScrollingGrid.asp）

此文章利用 Panel 控件和 DataGrid 控件实现了 ASP.NET 1.1 下的完整的、可实现双向滚动、表头锁定的表格，而且它实现了可以记录表格的滚动位置，页面 PostBack 后，表格仍能自动滚动到原有位置。这个控件的一个最大优点是能够适应多种浏览器，如 Internet Explorer 、FireFox 等。

在 ASP.NET 平台上，由于 DataGrid 控件已经升级为 GridView ，所以此控件已不能使用，按照文章下面的讨论，作者声称会尽快升级控件，但似乎在实现时碰到一些麻烦（如何确实表头各列的宽度），目前还没有结果。

目前我的做法：

1. 参照文章1中提到的作法，利用 CSS 来实现锁定表头的功能
2. 利用 Panel 控件，设置 ScrollBar 为 Vertical，再在其中放入 GridView 控件 ，可以实现竖向滚动条的功能
3. 利用 Atlas ，将上述 Panel 再放入 UpdatePanel ，以透明实现保持滚动条位置的功能

示例代码：

<h1>滚动条表格演示h1>
<style type="text/css">......
th {...}{...}{...}{
border-right: 1px solid silver;
position:relative;
top: expression(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.scrollTop-2); /**//**//**//*IE5+ only*/
}
style>

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
atlas:ScriptManager>
<br />
<asp:Panel ID="GridPanel" runat="server" Height="250px" ScrollBars="Auto" Width="562px">
   <atlas:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" SkinID="GridView" Width="434px">
          </asp:GridView>
       </ContentTemplate>
   </atlas:UpdatePanel>
</asp:Panel>

这样能基本上实现一个能够锁定表头、竖向滚动、能够在页面PostBack时保持滚动位置的表格，能够满足大部分应用需要。