教你如何维护Panel 滚动条位置-控件新闻-慧都网

教你如何维护Panel 滚动条位置

转帖|其它|编辑：郝浩|2010-11-26 14:33:58.000|阅读 1678 次

概述：本文主要介绍如何维护维护Panel 滚动条位置，希望对大家有帮助。

　　GridView 若需要有滚动条，通常会将 GridView 置于 Panel 中，并设定 Panel 的 ScrollBars 属性为 "Auto" 时，这样 Panel 就会自动判断是否需要出现水平或垂直滚动条。

　　1<asp:Panel ID="Panel1" runat="server" Height="300px" Width="712px" ScrollBars="Auto" BorderStyle="Solid" BorderWidth="1px">
　　2 <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False"
　　3 DataKeyNames="ProductID" DataSourceID="SqlDataSource1" EmptyDataText="没有数据录可显示。">
　　4 <Columns>
　　5 ...
　　6 ...
　　7 </Columns>
　　8 </asp:GridView>
　　9 </asp:Panel>

　　可是当页面 PostBack 时，Panel 的垂直滚动条会跳回最上方，水平滚动条会跳回最左方。我们可以参考 Page.MaintainScrollPositionOnPostBack 属性的做法(参考解析 Page.MaintainScrollPositionOnPostBack 属性这篇文章)，利用二个 HiddenField 来记录水平及垂直滚动条的位置。

　　我们可以在 Page Load 中撰写如下的程序代码，其中 Panel 的 ID 命名为 Panel1，在面页输出 "ScrollPosX" 及 "ScrollPosY" 二个 HiddenField，当页面 Sumbit 时，利用 "ScrollPosX" HiddenField 来记录滚动条水平位置，"ScrollPosY" HiddenField 来记录垂直位置。而当页面 PostBack 后重新加载页面，就取得这二个 HiddenField 值，重新设定 Panel 的滚动条位置，如此就可以维护 Panel 滚动条位置。

　　1 Protected Sub Page_Load()Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
　　2 Dim sScript As String
　　3 Dim oScrollPosX As HiddenField '记录水平滚动条位置
　　4 Dim oScrollPosY As HiddenField '记录垂直滚动条位直
　　5
　　6 oScrollPosX = New HiddenField()
　　7 oScrollPosX.ID = "ScrollPosX"
　　8 Me.Form.Controls.Add(oScrollPosX)
　　9
　　10 oScrollPosY = New HiddenField
　　11 oScrollPosY.ID = "ScrollPosY"
　　12 Me.Form.Controls.Add(oScrollPosY)
　　13
　　14 '页面 Sumbit 时，记录 Panel 的水平及垂直滚动条位置
　　15 sScript = "window.document.getElementById('" & oScrollPosX.ClientID & "').value =" & _
　　16 "window.document.getElementById('" & Panel1.ClientID & "').scrollLeft;"
　　17 sScript = sScript & _
　　18 "window.document.getElementById('" & oScrollPosY.ClientID & "').value = " & _
　　19 "window.document.getElementById('" & Panel1.ClientID & "').scrollTop;"
　　20 Me.ClientScript.RegisterOnSubmitStatement(Me.GetType, "SavePanelScroll", sScript)
　　21
　　22 If Me.IsPostBack Then
　　23 '当 PostBack 时，利用 HiddenField 记录的值来维护 Panel 滚动条位置
　　24 oScrollPosX.Value = Me.Request.Form(oScrollPosX.ClientID)
　　25 oScrollPosY.Value = Me.Request.Form(oScrollPosY.ClientID)
　　26
　　27 sScript = "window.document.getElementById('" & Panel1.ClientID & "').scrollLeft = " & oScrollPosX.Value & ";" & _
　　28 "window.document.getElementById('" & Panel1.ClientID & "').scrollTop = " & oScrollPosY.Value & ";"
　　29 Me.ClientScript.RegisterStartupScript(Me.GetType, "SetPanelScroll", sScript, True)
　　30 End If
　　31 End Sub