在 PostBack ASP.NET 之后保持 DIV 内 gridview 的水平滚动条位置
Maintain horizontal Scroll Bar position of a gridview inside a DIV after a PostBack ASP.NET
我有一个很长的网格视图。我想在回发时保持滚动位置。我已经尝试过很多关于堆栈溢出的解决方案,但知道对我有用。
这是我的网格视图
<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 但没有成功,因为所有教程都是垂直滚动而不是像我的水平滚动。任何帮助将不胜感激谢谢。
我在这里找到了 ansser 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);">
我有一个很长的网格视图。我想在回发时保持滚动位置。我已经尝试过很多关于堆栈溢出的解决方案,但知道对我有用。
这是我的网格视图
<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 但没有成功,因为所有教程都是垂直滚动而不是像我的水平滚动。任何帮助将不胜感激谢谢。
我在这里找到了 ansser 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);">