如何滚动到 GridView 中的选定行
本文关键字:GridView 何滚动 滚动 | 更新日期: 2023-09-27 18:33:31
我有一个 PageSize = 20(20 行)的 GridView,但它只能显示 10 行而没有出现垂直滚动条。
我的问题是,当回发发生时,即使我选择了不同的行,它也会跳到网格的第一行。我想滚动到所选行。我该怎么做?
在
页面指令中添加MaintainScrollPositionOnPostback
。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback ="true"%>
另一种方法是,使用包装 GridView 的 DIV 的 scrollTop 方法:
private void ScrollGrid()
{
int intScrollTo = this.gridView.SelectedIndex * (int)this.gridView.RowStyle.Height.Value;
string strScript = string.Empty;
strScript += "var gridView = document.getElementById('" + this.gridView.ClientID + "');'n";
strScript += "if (gridView != null && gridView.parentElement != null && gridView.parentElement.parentElement != null)'n";
strScript += " gridView.parentElement.parentElement.scrollTop = " + intScrollTo + ";'n";
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ScrollGrid", strScript, true);
}
编辑: 由于以下几个原因,这不起作用:
1)如果gridView位于命名容器控件(如面板)内,因为客户端上的ID不会是ClientId
。您需要改用控件的UniqueId
。
2)您不能信任行高来计算滚动位置。如果任何列中的文本换行到多行,或者任何行包含高于样式的内容,则行的大小将不同
3)不同的浏览器可以有不同的行为。你最好使用 jQuery scrollTop()
和 scroll()
函数。要使用它们,您必须在客户端使用 scrollTop
并设置可在服务器端读取的HiddenControl
的值以重置位置。在客户端呈现行之前,您无法在浏览器中获取行的高度。
网格视图的 RowDataBound 事件处理程序中的这段代码对我有用:
protected void dgv_usersRowDatabound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowIndex == intEditIndex)
{
DropDownList drpCategory = e.Row.FindControl("drpCategory") as DropDownList;
drpCategory.Focus();
}
}
网格视图在每一行中包含一个下拉列表作为编辑项模板。
这对
我有用,不需要 ASP.NET AJAX,UpdatePanel或cookie,并且比我见过的其他解决方案少得多的JavaScript。
<input type="hidden" runat="server" id="hdnScroll" value="0" />
<div style="height:600px; overflow-x:hidden; overflow-y:scroll">
<asp:GridView runat="server" ID="myGridView" OnRowDataBound="myGridView_RowDataBound" OnSelectedIndexChanged="myGridView_SelectedIndexChanged">
...
</asp:GridView>
</div>
然后
protected void myGridView_SelectedIndexChanged(object sender, EventArgs e) {
//if(gr != null) gr.SelectedRow.Cells[0].Focus(); // Only works on an editable cell
hdnScroll.Value = (myGridView.SelectedIndex * (int)myGridView.RowStyle.Height.Value).ToString();
}
最后回到.aspx,在回发时运行
<script type="text/javascript">
$(function() {
document.getElementById('<%=myGridView.ClientID%>').scrollTop = $('#hdnScroll').val();
});