Handsontable 行删除同步 MySQL 数据库的完整实现教程-js教程-PHP中文网

Handsontable 行删除同步 MySQL 数据库的完整实现教程

本文详解如何在 handsontable 中删除行时，通过 ajax 实时调用 php 后端接口，安全、准确地同步删除 mysql 数据库中对应记录，并规避因索引错位导致的 id 误删问题。

本文详解如何在 handsontable 中删除行时，通过 ajax 实时调用 php 后端接口，安全、准确地同步删除 mysql 数据库中对应记录，并规避因索引错位导致的 id 误删问题。

在 Handsontable 中实现「前端删行 → 后端删库」的双向同步，关键在于时机选择与数据准确性。原始代码使用 afterRemoveRow 钩子，此时行已从表格中移除，hot.getDataAtRow(index) 获取的是原位置下方的行（即索引漂移），导致误删相邻记录。正确方案是改用 beforeRemoveRow 钩子，在行被移除前精准捕获待删行的主键 ID，并延迟至 afterRemoveRow 执行实际删除请求，确保 UI 与数据状态一致。

✅ 正确的前端实现逻辑

// 假设 hot 是已初始化的 Handsontable 实例，且第 0 列为数据库主键 ID
hot.addHook('beforeRemoveRow', function (index, amount) {
    // 在行被移除前，批量提取待删行的 ID（假设 ID 在第 0 列）
    const removedRowIds = [];
    for (let i = 0; i  {
            deleteRowFromServer(id);
        });
    });
});

function deleteRowFromServer(id) {
    $.ajax({
        type: 'POST',
        url: 'delete_com.php',
        data: { id: id }, // 注意：单行删除传单个 id，非数组
        dataType: 'json',
        success: function (response) {
            if (response.success) {
                console.log(`✅ 成功删除数据库记录 ID: ${id}`);
            } else {
                console.warn(`⚠️ 删除失败（服务端返回）: ${response.message}`);
                // 可选：回滚 UI（重新插入该行）或提示用户
            }
        },
        error: function (xhr, status, error) {
            console.error(`❌ AJAX 请求失败: ${error}`, xhr.responseText);
        }
    });
}

? 关键点说明：

getDataAtRow(index) 必须在 beforeRemoveRow 中调用，此时数据尚未变动；

不要传整行数据（如 rowToDelete[0]），而应直接提取 row[0]（ID 字段）；

使用 addHookOnce('afterRemoveRow') 确保删除请求在 UI 更新后执行，避免竞态；

建议 dataType: 'json' 并让 PHP 返回结构化响应，便于前端判断结果。

✅ 安全可靠的后端（delete_com.php）

<?php header('Content-Type: application/json; charset=utf-8');
include "sessions.php";
include "../../db/conn.php";

// 防御性检查
if (!isset($_SESSION['company']) || !isset($_POST['id'])) {
    echo json_encode(['success' => false, 'message' => '缺少必要参数']);
    exit;
}

$compid = (int)$_SESSION['company'];
$id = (int)$_POST['id'];

if ($id  false, 'message' => '无效的 ID']);
    exit;
}

// 使用预处理语句防止 SQL 注入（关键！）
$stmt = $conn->prepare("DELETE FROM com WHERE ID = ? AND company = ?");
$stmt->bind_param("ii", $id, $compid);

if ($stmt->execute()) {
    $affected = $stmt->affected_rows;
    if ($affected === 1) {
        echo json_encode(['success' => true, 'message' => "已删除 ID: $id"]);
    } else {
        echo json_encode(['success' => false, 'message' => '未找到匹配记录（ID 或 company 不符）']);
    }
} else {
    echo json_encode(['success' => false, 'message' => '数据库执行错误: ' . $stmt->error]);
}

$stmt->close();
$conn->close();

⚠️ 重要注意事项：

绝不拼接 SQL：原始代码中 $idList 的字符串拼接存在严重 SQL 注入风险，必须废弃；

严格类型转换：对 $_POST['id'] 和 $_SESSION['company'] 强制转为 (int)，杜绝恶意输入；

验证影响行数：$stmt->affected_rows === 1 确保真实删除，避免静默失败；

返回 JSON 响应：统一格式便于前端解析，提升健壮性。

? 进阶建议（可选）

批量删除优化：若需支持多行同时删除，可将 beforeRemoveRow 中的 removedRowIds 一次性 POST 到后端，后端用 IN (?, ?, ?) 预处理（注意参数数量限制）；
撤销功能（Undo）：结合 Handsontable 的 updateSettings({undo: true}) 与自定义 undo stack，实现删除回滚；
Loading 状态反馈：在 deleteRowFromServer() 中添加按钮禁用、加载图标等 UX 提示，提升用户体验。

通过以上实现，你将获得一个精准、安全、可维护的 Handsontable 行删除同步方案——前端操作直观，后端防护严密，数据一致性得到充分保障。