Question

我的主页上有一个按钮... OnClick我从数据库中获取数据并将其绑定到我的GridView。我想在ButtonClick上“滑动”GridView。这是我的代码：

$(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”无法生效！为什么呢？

Answer 1

将GridView保留在DIV标记内并尝试设置动画。因为在呈现页面时，您的案例<asp:GridView>中的ServerSideControl的ID将被更改。

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

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

Answer 2

你可以这样说：

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

在ASP.NET中使用jQuery动画化GridView

2 个答案: