Question

我有一个下拉列表。在更改下拉列表的索引时，我填充了一个asp.net gridview。

我有一个要求，即用户应该能够在屏幕上删除gridview的各行。在每一行的末尾，我打算有一个删除按钮。单击按钮时该行应该消失。但这应该只在屏幕上。数据库中不应进行任何更改。

我现在有下面的代码：

ASPX

<table>
        <tr>
            <td>
                <div>
                    <asp:Label ID="lblClient" runat="server" Text="Client :" CssClass="label" ForeColor="Black"></asp:Label>
                    <asp:DropDownList ID="ddlClient" runat="server" AppendDataBoundItems="true" AutoPostBack="true" OnSelectedIndexChanged="ddlClient_SelectedIndexChanged">
                        <asp:ListItem Text="ALL" Value="0"></asp:ListItem>
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
        <td>
        <asp:GridView ID="gvMainLog" runat="server" Visible="true" AllowSorting="True" AutoGenerateColumns="False"AllowPaging="true">
                    <Columns>
                    <asp:BoundField DataField="Instruction" HeaderText="Instruction" />
                    <asp:BoundField DataField="ProviderId" HeaderText="Id" />
                    </Columns>
                    </asp:GridView>
                    <div>
                    <asp:TextBox ID="txtEditMin" runat="server"></asp:TextBox>
                    </div>
        </td>
        </tr>
    </table>

aspx.cs

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
        {
            gvMainLog.DataSource = GetSetupUtility(1);
            gvMainLog.DataBind();

        }

Answer 1

在GridView中添加像这样的删除命令

<Columns>
    <asp:BoundField DataField="Instruction" HeaderText="Instruction" />
    <asp:BoundField DataField="ProviderId" HeaderText="Id" />
    <asp:TemplateField ShowHeader="False">
        <ItemTemplate>
            <asp:Button ID="Button1" runat="server" CausesValidation="false" CommandName="Remove"
            Text="Remove" CommandArgument='<%# Eval("id") %>' />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

在删除按钮的操作中，使用DeleteRow方法

void gvMainLog_RowCommand(Object sender, GridViewCommandEventArgs e)
{
    if(e.CommandName=="Remove")
    {
        var id = Int32.Parse(e.CommandArgument);
        gvMainLog.DeleteRow(id);
    }
}

Answer 2

你需要这样的东西：在gridview中使用TemplateField。

<script>
function deleteRow(rowId) {
    $("#" + rowId).remove();
}
</script>
<asp:GridView ID="GridView1" runat="server" EnableModelValidation="True">
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <div id='<%# "myRow" + Container.DataItemIndex %>'> contents <img src="deleteImageUrl" onclick='<%# "deleteRow(\"myRow" + Container.DataItemIndex+"\")" %>'/> </div>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

仅在客户端删除网格视图的各行

2 个答案: