如何在滚动时固定 GridView 的页眉和页脚？

• 下载 GridViewDemo.zip - 1.3 KB

引言

本文档将向您展示如何使用 CSS 和 JavaScript 以简单的代码固定 GridView 的表头和页脚。

背景

理解 CSS 和 JavaScript

使用代码

1. 为 GridView 表头和页脚使用以下 2 个 CSS 类
   

   .GVFixedHeader { font-weight:bold; background-color: Green; position:relative; 
                    top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
   .GVFixedFooter { font-weight:bold; background-color: Green; position:relative;
                    bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));}
   

2. 使用以下 JavaScript 计算页脚的位置
   

   <script language="javascript" type="text/javascript">
           function getScrollBottom(p_oElem)
           {
            return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
           }
   </script>

3. 在 Panel 内部创建 GridView，将 Panel 的 ScrollBars 属性设置为“Auto”，将 Gridview 的 HeaderStyle 设置为“GVFixedHeader”，将 FooterStyle 设置为“GVFixedFooter”。

   <asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="150px" Width="400">
       <asp:GridView ShowFooter="True" runat="server" Width="96%" ID="gvDemo" AutoGenerateColumns="False">
       <HeaderStyle CssClass="GVFixedHeader" />
       <FooterStyle CssClass="GVFixedFooter" />
           <Columns>
               <asp:TemplateField HeaderText="C1">
                   <ItemTemplate>
                       <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                   </ItemTemplate>
                   <FooterTemplate>
                       C1 Footer Here
                   </FooterTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="C2">
                   <ItemTemplate>
                       <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                   </ItemTemplate>
                   <FooterTemplate>
                       C2 Footer Here
                   </FooterTemplate>
               </asp:TemplateField>
           </Columns>
       </asp:GridView>
      </asp:Panel>

4. 代码隐藏：在 Page_Load 函数中，我们将数据源绑定到 GridView。

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
           Dim dt As New DataTable
           dt.Columns.Add("C1")
           dt.Columns.Add("C2")
           Dim drRow As DataRow
           For i As Integer = 0 To 10
               drRow = dt.NewRow
               drRow(0) = "C1" & i
               drRow(1) = "C2" & i
               dt.Rows.Add(drRow)
           Next
           Me.gvDemo.DataSource = dt
           Me.gvDemo.DataBind()
       End Sub

5. 运行页面，您将看到表头和页脚在滚动时被固定。