让GridView的Food和Header一直显示在屏幕上（滚动时）

翻译
fenglinzh. 著How to Fixed GridView's Header and Footer when scrolling?

简介

本文向你展示：如何通过CSS和javascript，在GridView中使用滚动条滚动内容的时候，固定显示header头和footer。

代码使用

1. 使用下面的两个CSS类，分别作为header和footer的风格
.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脚本计算Footer的位置

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

3. 在一个Panle中创建GridView，设置Panle的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. 后台代码

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. 运行代码，你就会发现当你滚动GridView内容的时候，Food和Header被固定地一直显示在屏幕上。