gridview 行删除确认框

Posted 2023-03-06

【中文标题】gridview 行删除确认框

【英文标题】：gridview row delete confirmation box

【发布时间】：2021-04-15 22:19:56

【问题描述】：

我需要在 Gridview 删除时显示删除构造框。使用 OnClientClick 确认框，我展示了一个简单的 Internet 探索框，用于确认删除。是否可以为此展示一个精美的盒子。下面是我在 gridview 代码中的 javascript 代码：

OnClientClick="return DeleteItem();"

下面是我的网格视图

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                <Columns>
                    
                    <asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
                    <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row"    />
<ItemTemplate>
                             <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" OnClientClick="return DeleteItem();"  />    
</ItemTemplate>
                        </asp:TemplateField>
                </Columns>
</asp:GridView>

这是我的 Javascript 函数：

<script type="text/javascript">
    function DeleteItem() 
        if (confirm("Delete this Location?")) 
            return true;
         else 
            return false;
        
    
</script>
      

上面的代码显示了这个确认窗口：

我想展示这样的东西：

我们将不胜感激。

【参考方案1】：

无法将 css 添加到 confirm 框。您可以实现自己的 JavaScript 弹出窗口。

或者，有许多插件可以做到这一点。最受欢迎的 JQuery 插件之一是 JQuery UI 对话框 https://jqueryui.com/dialog/#modal-confirmation

作为将 JQuery UI Dialog 与 ASP.NET Gridview 集成的说明，请尝试以下操作：

<asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" class="button-delete" /> 

你不需要OnClientClick="return DeleteItem();" css 类可用作 onclick 事件的引用。

JavaScript：

$(function() 
    // Create click handler
    $('.ui-search-result-table').on('click', 'button-delete', function(e) 
        e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
        showDialog();
    );

    // Create the dialog popup
    function showDialog(button) 
        $("#dialog-confirm").dialog(
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: 
                "Remove": function() 
                    $(button).click(); // This should click imgbtnDelete
                ,
                Cancel: function() 
                    $(this).dialog("close");
                
            
        );
    
);

弹出式 HTML

<div style="display: none;">
    <div id="dialog-confirm" title="Remove Item?">
      <p>Are you sure you want to remove this item?</p>
    </div>
</div>

注意：此示例仅用于说明目的。您需要尝试一下您的解决方案才能使其正常工作。