学步园

asp:Panel可以在网页中画一块来显示数据,若显示全部数据所需要的面积比asp:Panel所分配的面积要大的话,就会出现滚动条(前提是asp:Panel的属性ScrollBars被赋值成vertical或horizontal,或者两者),此时,新的问题又出现了,就是在asp:Panel的内部的操作(比如单击某个控件)进行后,滚动条(若有的话)就会回到初始状态(水平滚动条回到最左边,垂直滚动条会回到最上端),若所需单击的控件在asp:Panel的最下端的话,则在每次单击之前,就需要先滚动滚动条,找到控件,然后再单击,这样UI,很明显不是一个友好的UI,对于这个问题,当然有解决办法,其中之一,就是记录在单击时滚动条的位置,并且在单击那个控件之后,再用之前保存的位置去设置滚动条,这样,给我们的感觉就是滚动条的位置没有变动了.

实现代码如下:

页面代码:

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

服务器端代码:

protected void Page_Load(object sender, EventArgs e)<br /> {<br /> //记录点击ckeckBox时滚动条形的位置<br /> ScriptManager.RegisterOnSubmitStatement(upPanel_emp, upPanel_emp.GetType(), "SavePanelScroll", "SavePanelScroll('" + panel_emp.ClientID + "','" + HiddenField_position.ClientID + "');");</p> <p> //*************************************<br /> // OTHER　CODE<br /> //*************************************</p> <p> //重新设置滚动条形的位置<br /> if (HiddenField_position.Value != null)<br /> {<br /> ScriptManager.RegisterStartupScript(upPanel_emp, upPanel_emp.GetType(), "SetPanelScroll", "SetPanelScroll('" + panel_emp.ClientID + "','" + HiddenField_position.ClientID + "');", true);<br /> }<br /> }<br /> protected void ckb_chgState_CheckedChanged(object sender, EventArgs e)<br /> {<br /> //add your code here<br /> }

在服务器端的代码中,先注册Script,然后再利用这个Script来记录和设置滚动条的位置.这样,在单击页面上的CheckBox之后,滚动条的位置还会保持在单击CheckBox之前的位置,方面我们进行下一步的操作(如比说单击GridView中下一行的CheckBox).