asp:Panel中vertical ScrollBars保持位置的一個解決辦法

asp:Panel可以在網頁中畫一塊來顯示數據,若顯示全部數據所需要的面積比asp:Panel所分配的面積要大的話,就會出現滾動條(前提是asp:Panel的屬性ScrollBars被賦值成vertical或horizontal,或者兩者),此時,新的問題又出現了,就是在asp:Panel的內部的操作(比如單擊某個控件)進行後,滾動條(若有的話)就會回到初始狀態(水平滾動條回到最左邊,垂直滾動條會回到最上端),若所需單擊的控件在asp:Panel的最下端的話,則在每次單擊之前,就需要先滾動滾動條,找到控件,然後再單擊,這樣UI,很明顯不是一個友好的UI,對於這個問題,當然有解決辦法,其中之一,就是記錄在單擊時滾動條的位置,並且在單擊那個控件之後,再用之前保存的位置去設置滾動條,這樣,給我們的感覺就是滾動條的位置沒有變動了.

實現代碼如下:

 

頁面代碼:

<asp:Content ID="mainContent" ContentPlaceHolderID="SampleContent" runat="Server"> <mce:script type="text/javascript"><!-- //保存滾動條的位置 function SavePanelScroll(PanelID,HiddenFieldID) { window.document.getElementById(HiddenFieldID).value=window.document.getElementById(PanelID).scrollTop; } //設置滾動條的位置 function SetPanelScroll(PanelID,HiddenFieldID) { window.document.getElementById(PanelID).scrollTop=window.document.getElementById(HiddenFieldID).value; } // --></mce:script> <asp:UpdatePanel ID="upPanel_emp" runat="server"> <asp:Panel ID="panel_emp" runat="server" Height="200px" Width="500px" ScrollBars="vertical" BackColor="white" > <asp:GridView ID="grd_emp" runat="server" ShowHeader="False" AutoGenerateColumns="False" SkinID="GridView1" > <Columns> <%--other columns --%> <asp:TemplateField HeaderText="change state"> <ItemTemplate> <asp:CheckBox ID="ckb_chgState" runat="server" OnCheckedChanged="ckb_chgState_CheckedChanged" AutoPostBack="True" Enabled="true" /> </ItemTemplate> <ItemStyle Width="59px" HorizontalAlign="Center" /> </asp:TemplateField> </Columns> </asp:GridView> <asp:HiddenField ID="HiddenField_position" runat="server" /> </asp:Panel> </asp:UpdatePanel> </asp:Content>

 

服務器端代碼:

protected void Page_Load(object sender, EventArgs e) { //記錄點擊ckeckBox時滾動條形的位置 ScriptManager.RegisterOnSubmitStatement(upPanel_emp, upPanel_emp.GetType(), "SavePanelScroll", "SavePanelScroll('" + panel_emp.ClientID + "','" + HiddenField_position.ClientID + "');"); //************************************* // OTHER　CODE //************************************* //重新設置滾動條形的位置 if (HiddenField_position.Value != null) { ScriptManager.RegisterStartupScript(upPanel_emp, upPanel_emp.GetType(), "SetPanelScroll", "SetPanelScroll('" + panel_emp.ClientID + "','" + HiddenField_position.ClientID + "');", true); } } protected void ckb_chgState_CheckedChanged(object sender, EventArgs e) { //add your code here }

 

在服務器端的代碼中,先註冊Script,然後再利用這個Script來記錄和設置滾動條的位置.這樣,在單擊頁面上的CheckBox之後,滾動條的位置還會保持在單擊CheckBox之前的位置,方面我們進行下一步的操作(如比說單擊GridView中下一行的CheckBox).