easyui如何删除数据库数据库数据

要使用EasyUI删除数据库中的数据，主要步骤包括：前端界面展示数据、用户选择要删除的记录、向服务器发送删除请求、服务器处理请求并删除数据、刷新前端展示。其中，向服务器发送删除请求是核心步骤之一，需要通过Ajax与后端进行交互，这样即使用户没有刷新页面也能即时看到删除的结果。通过这种交互方式，用户体验更好，同时提高了操作效率。下面，将详细讲解具体实现过程。

一、前端界面展示数据

前端界面通常使用EasyUI的datagrid控件来展示数据。通过datagrid，可以轻松地加载和管理数据记录。为了实现这一功能，先在HTML文件中引入EasyUI的相关CSS和JS文件。然后，配置datagrid并加载数据：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="My DataGrid" style="width:700px;height:250px"
            url="get_data.php"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="50">Item ID</th>
                <th field="productid" width="50">Product ID</th>
                <th field="listprice" width="50">List Price</th>
                <th field="unitcost" width="50">Unit Cost</th>
                <th field="attr1" width="50">Attribute</th>
                <th field="status" width="50">Status</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Delete</a>
    </div>
</body>
</html>

这里，我们使用url="get_data.php"从后端获取数据并在datagrid中展示。

二、用户选择要删除的记录

用户可以在datagrid中通过单选或复选框选择想要删除的记录。EasyUI提供了相关事件和方法来获取选中记录的ID或其他属性。比如, getSelected方法可以获取当前选中的行：

function getSelectedId() {
    var row = $('#dg').datagrid('getSelected');
    if(row) {
        return row.itemid;
    } else {
        alert('Please select a row to delete.');
        return null;
    }
}

这个函数通过getSelected方法获取当前选中的行，并返回该行的itemid。在删除操作中，我们将首先调用这个函数来获取需要删除的记录。

三、向服务器发送删除请求

用户点击删除按钮后，我们需要向服务器发送一个Ajax请求，告知服务器需要删除哪条记录。在前端JavaScript中，可以使用jQuery的Ajax方法来实现：

function destroyUser(){
    var id = getSelectedId();
    if(id != null) {
        $.ajax({
            type: 'POST',
            url: 'delete_data.php',
            data: { id: id },
            success: function(data) {
                if(data.success) {
                    //刷新datagrid显示最新数据
                    $('#dg').datagrid('reload');
                    alert('Delete success.');
                } else {
                    alert('Delete failed.');
                }
            }
        });
    }
}

在这个函数中，我们首先获取要删除的记录的ID，然后使用$.ajax向后端发送一个POST请求，请求的URL是delete_data.php，请求的数据包含需要删除的记录的ID。删除成功后，通过$('#dg').datagrid('reload')刷新datagrid，显示最新数据。

四、服务器处理请求并删除数据

后端服务器收到来自前端的删除请求后，应该根据请求参数进行相应的业务逻辑处理，通常包括：连接数据库、执行删除操作、返回结果。在PHP中，可以使用类似如下代码处理删除请求：

<?php
// delete_data.php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $id = $_POST['id'];
    $conn = new mysqli('localhost', 'username', 'password', 'database');
    if($conn->connect_error) {
        die('Connection failed: ' . $conn->connect_error);
    }
    $sql = "DELETE FROM your_table WHERE itemid = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('i', $id);
    if($stmt->execute()) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode(['success' => false]);
    }
    $stmt->close();
    $conn->close();
}
?>

在上述PHP代码中，我们首先检查请求方法是否为POST，然后从请求中获取要删除的记录的ID。然后连接数据库，预编译DELETE SQL语句，并绑定参数。执行完成后，返回删除成功或失败的信息。

五、刷新前端展示

当服务器成功处理请求并删除数据库中的数据后，应通知前端刷新数据展示。刷新操作可以通过先前的$('#dg').datagrid('reload');来实现。因此，在删除数据操作完成后，前端的处理步骤如下：

获取要删除记录的ID。
使用Ajax向服务器发送删除请求。
服务器处理请求并删除数据。
通知前端删除成功。
前端刷新datagrid，显示最新的数据。

完整的JavaScript代码如下：

function destroyUser(){
    var id = getSelectedId();
    if(id != null) {
        $.ajax({
            type: 'POST',
            url: 'delete_data.php',
            data: { id: id },
            success: function(data) {
                if(data.success) {
                    //刷新datagrid显示最新数据
                    $('#dg').datagrid('reload');
                    alert('Delete success.');
                } else {
                    alert('Delete failed.');
                }
            }
        });
    }
}