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

本文关键字：视图 网格 客户端 删除 | 更新日期: 2023-09-27 18:28:38

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

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

我现在有我的代码在下面：

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();
        }

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

在GridView中添加类似的remove命令

<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);
    }
}

您需要这样的东西：在网格视图中使用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>
相关文章：