PHP - 使用bootstrap模式作为确认删除多个选中的复选框

时间:2016-02-27 06:14:08

标签: php jquery twitter-bootstrap checkbox bootstrap-modal

我从数据库中检索数据并填充在表格中。对于每一行,都有一个复选框,用户可以在其中选择多行并将其删除。如何以这样的方式创建:当用户在选中表格上的复选框后单击删除按钮时,将显示引导模式作为删除所选行的确认。然后,用户将单击引导模式上的确认按钮以从数据库中删除记录。目前,当我单击bootstrap模式上的确认按钮时,它不会删除数据库上的记录。

index.php(PHP)

<?php
include_once 'configuration.php';

session_start();

$message = "";

if((isset($_SESSION['username']) == ""))
{
    header("Location: index.php");
}

$sql = "SELECT id, title FROM books";
$query = mysqli_query($db, $sql);
?>

index.php(HTML)

<div class="content">
            <form id="booksForm" action="" method="POST">
                    <table id="booksTable" class="col-md-12 table-bordered table-striped table-condensed cf">
                        <thead class="cf">
                            <tr>
                                <th><input type="checkbox" class="chkAll" value="" /></th>
                                <th>#</th>
                                <th>Title</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                                while($result = mysqli_fetch_array($query))
                                {
                                    $html = '<tr>
                                                <td data-title="">
                                                    <input type="checkbox" name="chkDelete[]" value="' . $result['id'] . '">
                                                </td>
                                                <td data-title="#">' . $result['id'] . '</td>
                                                <td data-title="Title">' . $result['title'] . '</td>
                                                <td data-title="Action">
                                                    <a href="edit.php?id=' . $result['id'] . '">Edit</a>
                                                </td>
                                             </tr>';

                                    echo $html;
                                }
                            ?>
                        </tbody>
                    </table>

                <input type="button" id="btnDelete" value="Delete" data-toggle="modal" data-target="#confirmDelete"/>
                <div class="message"><?php echo $message;?></div>
            </form>

            <div id="confirmDelete" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            Delete selected data?
                        </div>

                        <div class="modal-body">
                            Click confirm to delete data permanently.
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-success" id="btnConfirm">Confirm</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                        </div> <!--//END modal-footer-->
                    </div> <!--//END modal-content-->
                </div> <!--//END modal-dialog-->
            </div> <!--//END confirmDelete-->
        </div> <!--//END content-->
<script type="text/javascript" src="resource/js/bootstrap.min.js"></script>
<script>
    $('#btnConfirm').click(function() {
        $.ajax({
            type: "POST",
            url: "deleteBooks.php",
            data: $('confirmDelete').serialize(),
            success: function(msg){
                alert("success");
                $("#confirmDelete").modal('hide'); 
            },
            error: function(){
                alert("failure");
            }
        });
    });
</script>

deleteBooks.php(PHP)

<?php
include_once 'configuration.php';

if(isset($_POST['btnConfirm'])) 
{
    $checkbox = isset($_POST['chkDelete']) ? $_POST['chkDelete'] : array();

    $id = 0;

    for($i=0;$i<count($checkbox);$i++)
    {
        $id = $checkbox[$i];

        $deleteQuery = "DELETE FROM books WHERE id='$id'";
        $DeleteQueryExec = mysqli_query($db, $deleteQuery);
    }
}
?>

1 个答案:

答案 0 :(得分:0)

您的代码在这里错误: - data: $('confirmDelete').serialize(),。它应该是$("#formid").serialize();看到你做一件事首先找出复选框数组点击的值如下: -

var matches = [];
$(".className:checked").each(function() {
    matches.push(this.value);
});

根据要求

然后在data: {'selChkbxs' : matches, 'btnConfirm': 1}

的位置添加data: $('confirmDelete').serialize(),

ajax代码: -

<script>
    $('#btnConfirm').click(function() {

        var matches = [];
        $(".className:checked").each(function() {
            matches.push(this.value);
        });
        $.ajax({
            type: "POST",
            url: "deleteBooks.php",
            data: {'selChkbxs' : matches, 'btnConfirm': 1},
            success: function(response){

                response = parseInt(response);

                $("#confirmDelete").modal('hide'); 

                switch (response){

                    case 1:
                        $("#errorDiv").text('Unauthorised access'); // create a error div somewhere in ur html page for this
                    break;

                    case 2:
                        $("#errorDiv").text('Records deleted successfully.');
                    break;

                    case 3:
                        $("#errorDiv").text('Something wrong. Please try again.');
                    break;


                }



            },
            error: function(){
                alert("failure");
            }
        });
    });
</script>

然后在ajax deleteBooks.php页面中添加此

<?php 

if(empty($_POST)){

    $msg = 1;

} else {

    include_once 'configuration.php';

    if(isset($_POST['btnConfirm'])) 
    {
        $checkbox = isset($_POST['selChkbxs']) ? $db->real_escape_string($_POST['selChkbxs']) : null;


        $deleteQuery = "DELETE FROM books WHERE id IN ($checkbox)";
        if($DeleteQueryExec = mysqli_query($db, $deleteQuery))
        $msg = 2;
        else
        $msg = 3;

    }


}

die($msg);

?>

如果发现问题,请回复