使用jquery对话框删除网格视图行

在使用jQuery对话框删除网格视图行的过程中，可能会涉及到以下几个基础概念：

基础概念

jQuery: 一个快速、小巧且功能丰富的JavaScript库，用于简化HTML文档遍历、事件处理、动画和Ajax交互。
对话框（Dialog）: 一种弹出窗口，用于显示重要信息或获取用户输入。
网格视图（GridView）: 一种常见的Web控件，用于以表格形式显示数据集合。

类型

模态对话框: 阻止用户与页面其余部分交互，直到对话框关闭。
非模态对话框: 允许用户在对话框打开时与页面的其他部分交互。

应用场景

数据删除确认: 在删除重要数据前，通过对话框确认用户意图。
表单输入提示: 在用户填写表单时提供额外的信息或指导。

示例代码

以下是一个简单的示例，展示了如何使用jQuery UI的对话框组件来删除网格视图中的一行数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Dialog Delete Row Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<table id="gridView" border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Item 1</td>
        <td><button class="delete-btn" data-id="1">Delete</button></td>
    </tr>
    <!-- More rows here -->
</table>

<div id="deleteDialog" title="Confirm Delete">
    <p>Are you sure you want to delete this item?</p>
</div>

<script>
$(function() {
    $("#deleteDialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Delete": function() {
                var rowId = $(this).data('id');
                $(this).closest('tr').remove();
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

    $(".delete-btn").click(function() {
        var rowId = $(this).data('id');
        $("#deleteDialog").data('id', rowId).dialog("open");
    });
});
</script>

</body>
</html>