ASP.NET GridView 固定表頭與凍結欄位實作

大量資料表格常需固定表頭與左側欄位，方便使用者捲動時仍能對照標題。本文示範使用 jQuery 外掛 gridviewScroll 在 ASP.NET GridView 上實現此功能。

所需資源

• jQuery 核心庫（如 jquery-1.8.3.min.js）
• jQuery UI（jquery-ui-1.10.3.custom.js，含核心互動）
• gridviewScroll.min.js（主要外掛）
• GridviewScroll.css（樣式表）

以上檔案可從官方網站或 CDN 下載。

前端頁面結構

<div id="divservic" style="width: 100%; margin-bottom: 2px; height: 220px;">
    <asp:GridView ID="GridView2" runat="server" CellPadding="4" ForeColor="#333333" Width="100%"
        BorderColor="#D1DDAA" AllowPaging="True" DataKeyNames="InstallationID"
        OnPageIndexChanging="GridView2_PageIndexChanging"
        OnRowDataBound="GridView2_RowDataBound"
        OnRowDeleting="GridView2_RowDeleting" AutoGenerateColumns="False"
        AllowSorting="True" OnSorting="GridView2_Sorting">
        <RowStyle CssClass="GridviewScrollItem" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle CssClass="GridviewScrollPager" />
        <SelectedRowStyle BackColor="#C5BBAF" />
        <HeaderStyle CssClass="GridviewScrollHeader" />
        <EditRowStyle BackColor="#7C6F57" />
        <AlternatingRowStyle BackColor="White" BorderColor="#D1DDAA" />
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="ckbitem" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="InstallationID" HeaderText="InstallationID" SortExpression="InstallationID" />
            <asp:BoundField DataField="Completed" HeaderText="Completed" />
            <asp:BoundField DataField="Tid" HeaderText="Tid" />
            <asp:BoundField DataField="Mid" HeaderText="Mid" />
            <asp:BoundField DataField="Bank" HeaderText="Bank" />
            <asp:BoundField DataField="Model" HeaderText="Model" />
            <asp:BoundField DataField="Barcode" HeaderText="Barcode" />
            <asp:BoundField DataField="DateReq" HeaderText="DateReq" SortExpression="DateReq" />
        </Columns>
    </asp:GridView>
</div>

關鍵點：GridView 必須放在固定高度的容器 div 中，且需指定 CssClass 供外掛識別列類型。

JavaScript 初始化

<script type="text/javascript">
    $(document).ready(function () {
        gridviewScroll();
    });

    function gridviewScroll() {
        // 取得容器尺寸（也可直接寫死數值）
        var gridWidth = $("#divservic").width();
        var gridHeight = $("#divservic").height();
        var headerHeight = $("#divHeader").height(); // 若有獨立表頭區塊
        gridHeight = gridHeight - headerHeight;

        $('#<%=GridView2.ClientID%>').gridviewScroll({
            width: gridWidth,        // 寬度不可用 100%，需具體像素
            height: gridHeight,      // 高度
            freezesize: 4            // 凍結左側 4 欄
        });
    }
</script>

參數說明

常見問題與解決

• 分頁/排序後失效：UpdatePanel 部分更新或回發後需重新初始化。可在 PageRequestManager.getInstance().add_endRequest(gridviewScroll) 中重新呼叫。
• 欄位寬度異常：確保 GridView Width="100%"，且容器寬度確定；外掛會根據 width 參數計算各欄寬度。
• IE 相容性：舊版 IE 可能需引入 json2.js、html5shiv.js。
• 替代方案：現代專案建議改用前端表格元件（如 DataTables、AG Grid、TanStack Table）配合 Web API，體驗更佳且不綁定伺服器端控件。