让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被固定地一直显示在屏幕上。