PHP - 使用bootstrap

时间:2016-07-08 12:19:20

标签: php jquery twitter-bootstrap

这就是我想要做的,我会给你一个场景。如果我单击删除按钮,将弹出模式并询问您是否要删除。单击确定后,它将执行查询并将其删除到数据库。有人可以给我一些想法吗?

这是我网格的图片。 enter image description here

这是我的代码。

 <?php
    include_once('connection.php');
  ?>
    <!DOCTYPE html>
    <html>
    <head>
            <link rel="stylesheet" href ="css/bootstrap.min.css">
            <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
            <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>  
    <div class="container">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th width="60">ID</th>
                    <th width="200">Title</th>
                    <th width="150">Date Posted</th>
                    <th>Content</th>
                    <th width="200">Image</th>
                    <th width="200">Action</th>
                </tr>
            </thead>
            <tbody>
            <?php

            $stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id");
            mysqli_stmt_execute($stmt);
            $result = mysqli_stmt_get_result($stmt);
            while($row = mysqli_fetch_array($result)){
            ?>
                <tr>
                    <td><?php echo $row['news_id']; ?></td>
                    <td><?php echo $row['news_title']; ?></td>
                    <td><?php echo $row['news_date']; ?></td>
                    <td><?php echo $row['news_content']; ?></td>
                    <td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>"  ></td>
                    <td>
                         <a href="edit2.php?newsid=<?php echo $row['news_id'];?>" class='btn btn-info left-margin'><span class="glyphicon glyphicon-edit"></span> Edit</a>
                         <a class='btn btn-danger delete-object'><span class="glyphicon glyphicon-remove"></span> Delete</a>
                    </td>
                </tr>
            <?php
            }
            ?>
            </tbody>
        </table>
    </div>


        <script src="js/jquery-1.12.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

2 个答案:

答案 0 :(得分:2)

您可以使用Bootstrap dialogs来显示对话框。显示确认对话框时,您可以检查用户是否单击了OK,然后对ex:list.php执行AJAX请求?delete_photo = 31

BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
            if(result) {
                alert('Yup.');
            }else {
                alert('Nope.');
            }
        });

答案 1 :(得分:0)

如果有一种奇特的方法,请尝试模态:

 <?php
    include_once('connection.php');
  ?>
    <!DOCTYPE html>
    <html>
    <head>
            <link rel="stylesheet" href ="css/bootstrap.min.css">
            <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
            <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>  
    <div class="container">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th width="60">ID</th>
                    <th width="200">Title</th>
                    <th width="150">Date Posted</th>
                    <th>Content</th>
                    <th width="200">Image</th>
                    <th width="200">Action</th>
                </tr>
            </thead>
            <tbody>
            <?php

            $stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id");
            mysqli_stmt_execute($stmt);
            $result = mysqli_stmt_get_result($stmt);
            while($row = mysqli_fetch_array($result)){
            ?>
                <tr>
                    <td><?php echo $row['news_id']; ?></td>
                    <td><?php echo $row['news_title']; ?></td>
                    <td><?php echo $row['news_date']; ?></td>
                    <td><?php echo $row['news_content']; ?></td>
                    <td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>"  ></td>
                    <td>
                         <a href="edit2.php?newsid=<?php echo $row['news_id'];?>" class='btn btn-info left-margin'><span class="glyphicon glyphicon-edit"></span> Edit</a>
                         <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Delete</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Delete immage <?php echo $row['news_title']; ?> </h4>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delte this immage?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-danger" >Delete</button>
        </div>
      </div>

    </div>
  </div>
                    </td>
                </tr>
            <?php
            }
            ?>
            </tbody>
        </table>
    </div>


        <script src="js/jquery-1.12.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

模态示例来自w3schools,您可以在那里阅读更多内容。 Modal是最有效的方法,搜索和阅读更多......

祝你好运,
M.I.