EasyUI Datagrid 多行選中批量提交至 PHP 處理的完整實現

前端實現 (JavaScript)

function batchDelete() {
    var rows = $('#dg').datagrid('getSelections');
    if (rows.length === 0) {
        alert('請至少選擇一行！');
        return;
    }
    // 提取 id 字段（假設主鍵為 id）
    var ids = rows.map(function(row) { return row.id; }).join(',');

    $.ajax({
        url: 'batch_process.php',
        type: 'POST',
        data: { ids: ids, action: 'delete' },
        dataType: 'json',
        success: function(res) {
            if (res.success) {
                $('#dg').datagrid('reload');
                alert('操作成功：' + res.msg);
            } else {
                alert('失敗：' + res.msg);
            }
        }
    });
}

後端實現 (PHP)

 false, 'msg' => '無 ID']);
    exit;
}

$idArray = array_map('intval', explode(',', $ids)); // 防注入
$placeholders = implode(',', array_fill(0, count($idArray), '?'));

// 示例：批量刪除
$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
$stmt = $pdo->prepare("DELETE FROM data_table WHERE id IN ($placeholders)");
$stmt->execute($idArray);

echo json_encode(['success' => true, 'msg' => "已處理 {$stmt->rowCount()} 條"]);
?>

進階：批量更新

若需更新，前端用 getChanges('modified') 獲取修改行，構造 [{id:1, field:'val'}, ...]，後端 json_decode 後逐條預處理語句更新。

關鍵點

• 前端只傳 ID 陣列，減少傳輸量。
• 後端使用預處理語句 + 參數綁定，防 SQL 注入。
• 返回統一 JSON 格式，前端統一處理成功/失敗。