时间戳

首页 > 解决方案 > 在 PostBack ASP.NET 之后保持 DIV 内 gridview 的水平滚动条位置

javascript - 在 PostBack ASP.NET 之后保持 DIV 内 gridview 的水平滚动条位置

问题描述

我有一个很长的网格视图。我想在回发时保持滚动位置。我已经尝试了许多关于堆栈溢出的解决方案，但知道对我有用。

这是我的网格视图

<div class="largeGridScroll">
           <asp:GridView ID="gvInventario" runat="server" AutoGenerateColumns="false"  AllowSorting="true" ShowFooter="false" DataKeyNames="componente_id, ubicacion_id, proveedor_id"  PageSize="10"
                ShowHeaderWhenEmpty="true" AllowPaging="True" OnRowEditing="gvInventario_RowEditing" OnRowCancelingEdit="gvInventario_RowCancelingEdit" OnPageIndexChanging="gridView_PageIndexChanging" 
                 CellPadding="3"  AllowColumResize="True" onsorting="grdDetails_Sorting" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">    
                <Columns>
                </Columns>
            </asp:GridView>
            </div>

这是我想防止滚动条静止的按钮的代码

        <asp:Button class="btn btn-primary" ID="btnConfirmPurchases" runat="server" Text="Validar" AutoPostback="true" width="20%"  OnClick="Add_location_Click" /> 
            <asp:Button class="btn btn-primary"  ID="Button1" runat="server" Text="Validar" OnClick="Confirm_purchase_order_Click"  />
  <asp:Button class="btn btn-primary" ID="btnShowPurchaseOrder" runat="server" Text="Comprar" AutoPostback="false" OnClientClick="return ShowModalPopup(); return false;" OnClick="view_purchases_click" />     

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                           <%-- <asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server" class="button" ToolTip="Shopping" Width="20px" Height="20px" />--%>
                            <a class="button" href="#popup1" ><img src="../images/shopping.png" width="20" height="20"/></a>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" ToolTip="Update" Width="20px" Height="20px" OnClick="updateOcurencia"/>
                            <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                        </EditItemTemplate>
                    </asp:TemplateField>

这是CSS。

.largeGridScroll 
{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

这是我的 gridview 的样子。 网格图像

当我按下其中一个按钮时，我不想失去我的滚动位置，就像在图片上一样。我曾尝试使用 javascript 和 updatepanel 但没有成功，因为所有教程都有垂直滚动而不是像我的那样水平滚动。任何帮助将不胜感激，谢谢。

标签： javascriptasp.netupdatepanel

解决方案

我在这里找到了分析器https://www.webcodeexpert.com/2015/09/how-to-maintain-scroll-position-of-html.html我只需要更改一些小东西就可以使它变得水平 这是我的 css

.largeGridScroll 
{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

这是我的 javascript

 $(document).ready(function () {
    maintainScrollPosition();
});

function pageLoad() {
    maintainScrollPosition();
}

function setScrollPosition(scrollValue) {
    $('#<%=hfScrollPosition.ClientID%>').val(scrollValue);
}

function maintainScrollPosition() {
    $("#dvScroll").scrollLeft($('#<%=hfScrollPosition.ClientID%>').val());
}

这是我的aspx

 <asp:HiddenField ID="hfScrollPosition" Value="0" runat="server" />
    <div  id="dvScroll" class="largeGridScroll" onscroll="setScrollPosition(this.scrollLeft);">

推荐阅读