ASP.NET学习笔记[10] - GridView点击行按钮的时候固定滚动条的实现方法

GridView显示的内容行数比较多需要垂直方向滚动条,但是遇到这样一个问题,如果我们把滚动条拖到最下面,此时点击GridView行按钮事件,不论是刷新页面其它控件还是弹出一个alert,都会导致GridView的滚动条自动回到第一行状态,用户之前滑动到的位置丢失了,用户需要再次将滚动条拖到上次的位置,操作麻烦,影响用户体验.

解决方案:用js记录滚动条坐标,实现锚定效果

    <script type="text/javascript" language="javascript">
        function RecordPostion(obj) {
            var diva = obj;
            var sx = document.getElementById('<%=dvscrollX.ClientID %>');
            var sy = document.getElementById('<%=dvscrollY.ClientID %>');
            sy.value = diva.scrollTop;
            sx.value = diva.scrollLeft;
        }

        function GetResultFromServer() {
            var sx = document.getElementById('<%=dvscrollX.ClientID %>');
            var sy = document.getElementById('<%=dvscrollY.ClientID %>');
            //为什么div1就不用ClientID，其它服务器控件就要用？
            document.getElementById('div1').scrollTop = sy.value;
            document.getElementById('div1').scrollLeft = sx.value;
        }
    </script>

在页面上添加两个HiddenField,分别记录X轴和Y轴滚动条坐标,这里有一个小细节,因为我的页面使用了UpdatePanel,所以在获取HiddenField控件ID的时候,应该用这种写法<%=dvscrollX.ClientID %>,如果不用UpdatePanel的话就直接写dvscrollX即可,对于div而言不管用不用UpdatePanel,都可以直接写成div1

<asp:HiddenField ID="dvscrollX" runat="server" />
<asp:HiddenField ID="dvscrollY" runat="server" />

GridView控件外侧的div标记增加js代码 οnscrοll="javascript:RecordPostion(this);"

<div id="div1" style="overflow: auto; line-height: 100%; letter-spacing: 1pt; height: 150px; margin:5px" onscroll="javascript:RecordPostion(this);">
    <asp:GridView ID="GridView1" runat="server" Width="98%" AutoGenerateColumns="False" CssClass="gv" DataKeyNames="管线ID" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">
         <Columns>                             
              <asp:BoundField DataField="管线ID" HeaderText="管线ID" ReadOnly="true">
                   <FooterStyle CssClass="hidden" />
                   <HeaderStyle CssClass="hidden" />
                   <ItemStyle HorizontalAlign="Center" CssClass="hidden" />
              </asp:BoundField>
              <asp:TemplateField HeaderText="主项号">
                   <EditItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("主项号") %>'></asp:TextBox></EditItemTemplate>
                   <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("主项号") %>'></asp:Label></ItemTemplate>
                   <ItemStyle HorizontalAlign="Center" Width="120px" />
               </asp:TemplateField>
               <asp:TemplateField HeaderText="明细">
                   <ItemTemplate>
                        <p class="cai">
                             <asp:LinkButton ID="lbDetails" runat="server" CommandArgument='<%# Eval("管线ID") %>' CommandName="Details" CausesValidation="False"  Text="明细" />
                        </p>
                   </ItemTemplate>
                   <HeaderStyle HorizontalAlign="Center" />
                   <ItemStyle HorizontalAlign="Center" Width="50px"/>
               </asp:TemplateField>
         </Columns>
         <RowStyle CssClass="gv_row" />
         <AlternatingRowStyle CssClass="gv_alternet_row" />
         <SelectedRowStyle CssClass="gv_selected_row" />
         <HeaderStyle CssClass="gv_header" />
     </asp:GridView>
</div>

后台代码

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            string pipelineId = e.CommandArgument.ToString();  //获取管线id

            if (e.CommandName == "Details")    //查看明细
            {
                //做相应的操作... 

                //加载js代码，调用GetResultFromServer()方法
                string sjs = "GetResultFromServer();"; 
                ScriptManager.RegisterClientScriptBlock(this.GridView1, this.GetType(), "", sjs, true);

            }
        }

最后说明：问题解决思路来自 gridview刷新问题，滚动条如何固定住-CSDN论坛