스크롤 애니메이션을 그리드보기 컨트롤에 적용하는 방법

-1

새 행이 추가 될 때마다 기존 행이 천천히 아래로 이동하고 새 것이 그리드보기 컨트롤에 추가됩니다.스크롤 애니메이션을 그리드보기 컨트롤에 적용하는 방법

2011-04-22 rani

동일한 요구했다 질문 3 번 오늘 – Magnus

jQuery.ScrollTo 플러그인을 확인해보십시오. 화면을 천천히 스크롤 할 때 유용합니다. ScriptManager.RegisterStartupScript 또는 ClientScript를 사용하여 기존 제어 할 수있는 그리드 아래에 몇 제어 할 수 또는 당신이 당신의 행을 추가 한 후에는 스크립트 $ .scrollTo ('#의 grid_bottom')를 추가 할 수

같은 앵커 태그를 추가 할 수 있습니다 .RegisterStartupScript (당신 중 하나가 업데이트 패널을 사용하는 스크립트 관리자를 사용하십시오) 그리고 그것은 천천히 아래로 스크롤해야합니다. 여기

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>

출처

2011-04-22 11:58:10

안녕하세요, 자바 스크립트를 사용하여 가능하거나하지 않습니까? – rani

ScriptManager.RegisterStartupScript를 사용하여 격자보기 행을 스크롤하는 샘플 코드를 제공하십시오. – rani

$ .ScrollTo ('# sc1');

하지만 작동하지 않습니다. – rani

스크롤 애니메이션을 그리드보기 컨트롤에 적용하는 방법

답변

관련 문제