2011-02-24 9 views
0

홈 페이지에 단추가 있습니다 ... OnClick 데이터베이스에서 데이터를 가져와 GridView에 바인딩하고 있습니다. ButtonClick의 GridView를 "SlideDown"하고 싶습니다. 이건 내 코드입니다 :ASP.NET에서 jQuery로 애니메이션 그리기

$(document).ready(function() { 
    $("#ShowAllRecordsBtn").click(function() { 
     $("#GridView1").slideDown(100); 
    }); 
}); 

그리고 나는 나의의 GridView이 :

<asp:GridView ID="GridView1" runat="server" CellPadding="4" GridLines="None" Style="z-index: 1; 
    left: 65px; top: 93px; position: absolute; height: 180px; width: 304px" AutoGenerateEditButton="false" 
    AutoGenerateColumns="False" AutoGenerateDeleteButton="True" DataKeyNames="EmpId" 
    OnRowDeleting="GridView1_RowDeleting1" OnRowCommand="GridView1_RowCommand" ForeColor="#333333"> 
    <RowStyle BackColor="#EFF3FB" /> 
    <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" /> 
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> 
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> 
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <EditRowStyle BackColor="#2461BF" /> 
    <AlternatingRowStyle BackColor="White" /> 
    <Columns> 
     <asp:TemplateField> 
      <HeaderTemplate> 
       <asp:Label runat="server" Text="ID"></asp:Label> 
      </HeaderTemplate> 
      <EditItemTemplate> 
       <asp:TextBox ID="txtEmpId" runat="server" ReadOnly="true" Text='<%#Eval("EmpId") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Label ID="txtEmpId" runat="server" Text='<%#Eval("EmpId") %>'></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField> 
      <HeaderTemplate> 
       <asp:Label ID="Label2" runat="server" Text="Name"></asp:Label> 
      </HeaderTemplate> 
      <EditItemTemplate> 
       <asp:TextBox ID="txtEmpName" runat="server" Text='<%#Eval("EmpName") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Label ID="txtEmpName" runat="server" Text='<%#Eval("EmpName")%>'></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField> 
      <HeaderTemplate> 
       <asp:Label ID="Label3" runat="server" Text="Address"></asp:Label> 
      </HeaderTemplate> 
      <EditItemTemplate> 
       <asp:TextBox ID="txtEmpAdd" runat="server" Text='<%#Eval("EmpAdd") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Label ID="txtEmpAdd" runat="server" Text='<%#Eval("EmpAdd")%>'></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField> 
      <HeaderTemplate> 
       <asp:Label ID="Label4" runat="server" Text="Age"></asp:Label> 
      </HeaderTemplate> 
      <EditItemTemplate> 
       <asp:TextBox ID="txtEmpAge" runat="server" Text='<%#Eval("EmpAge") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Label ID="txtEmpAge" runat="server" Text='<%#Eval("EmpAge")%>'></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:Button ID="btnSelect" runat="server" Text="Select" CommandName="Select" CommandArgument='<%#Eval("EmpId") %>' /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

은 "SlideDown"이 적용되지 않습니다! 왜?

+0

당신은 결합하고 버튼 클릭에 그리드 뷰를 애니메이션을 적용 할. –

+0

슬라이드 효과로 인해 Gridview 헤더가 고정되어 있습니까? 또는 헤더가 슬라이딩으로 사라지나요? – bonCodigo

답변

0

DIV 태그 안에 GridView를 유지하고 애니메이션을 적용하십시오. 귀하의 케이스에있는 ServerSideControl의 ID가 <asp:GridView>이므로 페이지가 렌더링 될 때 변경됩니다.

<div id="divGrid"> 
    <asp:GridView> 
    </asp:GridView> 
</div> 

$("#ShowAllRecordsBtn").click(function() { 
     $("#divGrid").slideDown(100); 
    }); 
0

당신은 좋아 둘 수 있었다 :

$($get('<%= GridView1.ClientID.toString() %>')).slideDown(100); 
관련 문제