在 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時保持滾動位置的表格，能夠滿足大部分應用需要。