如何在GridView中滚动到所选行

Question

我有一个GridView，PageSize为20（20行），但它只能显示10行，没有垂直滚动条。

我的问题是，当发生PostBack时，它会跳到网格的顶部行，即使我选择了不同的行。我想要滚动到选定的行，该怎么做？

- GStar

Answer 1

在您的页面指令中添加 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 在 NamingContainer 控件（如 Panel）内部，因为 Id 在客户端不会是 ClientId，所以需要使用控件的 UniqueId。

2）不能依赖行高度计算滚动位置。如果任何列中的文本换行成多行，或任何一行包含超过样式的内容，则行的大小将不同。

3）不同浏览器可能具有不同的行为。最好使用 jQuery 的 scrollTop() 和 scroll() 函数。要使用它们，必须在客户端使用 scrollTop 并设置可以在服务器端读取以重置位置的 HiddenControl 的值。在客户端渲染行之前，无法在浏览器中获取行的高度。

- LaGrandMere

---

使用带有runat="server"的隐藏输入来实现这些功能的解决方案在此处描述http://microsoftmiles.blogspot.com/2006/11/maintaining-gridview-scroll-position-in.html 尽管这需要ASP.NET AJAX。 - East of Nowhere

Answer 2

这段代码是在gridview的RowDataBound事件处理程序中使用的，对我很有用：

protected void dgv_usersRowDatabound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowIndex == intEditIndex)
    {
        DropDownList drpCategory = e.Row.FindControl("drpCategory") as DropDownList;
        drpCategory.Focus();
    }
 }

每一行EditItemTemplate中的Gridview都包含一个下拉列表。

- Tom B

Answer 3

这对我很有用，不需要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，在 postback 时运行

<script type="text/javascript">
$(function() {
  document.getElementById('<%=myGridView.ClientID%>').scrollTop = $('#hdnScroll').val();
});

- East of Nowhere