Question

每当添加新行时，已经存在的行将慢慢向下移动，并且新的行将在网格视图控件中添加。

Answer 1

查看jQuery.ScrollTo插件，它非常适合慢慢滚动屏幕。在网格下面有一些控件，它可以是现有控件，或者你可以添加像

这样的锚标签

添加行后，您将使用ScriptManager.RegisterStartupScript或ClientScript.RegisterStartupScript（使用脚本管理器中的一个使用更新面板）添加脚本$ .scrollTo（'＃grid_bottom'），它应该慢慢向下滚动

Link to download page for jQuery ScrollTo Plugin

以下是一些示例代码，您可以更改ScrollTo功能中的持续时间或将其关闭，滚动将立即发生而不会平滑滚动：

<%@ Page Language="C#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    public List<KeyValuePair<string, string>> Items
    {
        get { return (List<KeyValuePair<string, string>>)ViewState["Items"]; }
        set { ViewState["Items"] = value; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Items = new List<KeyValuePair<string, string>>();

            for (int i = 0; i < 200; i++)
                Items.Add(new KeyValuePair<string, string>(i.ToString(), "Test" + i));

            GridTest.DataSource = Items;
            GridTest.DataBind();

        }
    }



    protected void cmdAddNew_Click(object sender, EventArgs e)
    {
        Items.Add(new KeyValuePair<string, string>("", DateTime.Now.ToString()));

        GridTest.DataSource = Items;
        GridTest.DataBind();
        ScriptManager.RegisterStartupScript(this, GetType(), "scrollto",
                string.Format(
                    @" $(document).ready(function(){{
                        $.scrollTo($('#{0}'), 2000);
                }});", cmdAddNew.ClientID), true);

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1">
        <Scripts>
            <asp:ScriptReference Path="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js" />
            <asp:ScriptReference Path="/JavaScript/jquery.scrollTo-min.js" />
        </Scripts>
    </asp:ScriptManager>
    <asp:UpdatePanel ID="pnlTest">
        <ContentTemplate>
            <asp:LinkButton ID="cmdAddNew2" runat="server" OnClick="cmdAddNew_Click">Add New</asp:LinkButton>
            <asp:GridView ID="GridTest" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Value" />
                </Columns>
            </asp:GridView>
            <asp:LinkButton ID="cmdAddNew" runat="server" OnClick="cmdAddNew_Click">Add New</asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

如何将滚动动画应用于网格视图控件

1 个答案: