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