时间戳

首页 > 解决方案 > 如何检索模式中的数据显示

php - 如何检索模式中的数据显示

问题描述

在卡片视图中显示所有数据的第一张图片

弹出模式的第二张图片

我想要的是当我单击查看按钮时，它将获取所有数据并显示在模态中。数据可以显示在输入框、文本区域和图像中。

这是在卡片视图中排列所有数据的代码

 <?php 
            while ($row = mysqli_fetch_assoc($result)){ 

              $wid = $row['web_id'];
          ?>
            <div class="col-sm-4 col-xs-12">
              <div class="panel panel-default text-center">
                <div class="panel-heading">
                  <h3><b><?php echo $row['web_name']; ?></b></h3>
                </div>
                <div class="panel-body">
                <?php 
                  if(empty($row['web_image'])){
                      echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
                  }else{
                      echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
                  }
                ?>
                </div>
                <div class="panel-footer">
                  <h4><b><?php echo $row['web_id']; ?></b></h4>
                  <a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
                  <h4><?php echo $row['web_description']; ?></h4>
                  <hr>
//This is an button for view modal
                  <?php echo '<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#viewmodal" class="viewbtn">View</button>'; ?>
                   <?php echo '<a href="web_update_data.php?id='.$row['web_id'].'"><button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span>&nbsp;EDIT</button></a>';?>

                </div>
              </div>      
            </div> 
          <?php
            }
          ?>

这是模态代码

<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
            </div>
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                  <div class="form-group">
                        <label><b>Web ID : </b></label> &nbsp;<span class="validation">*</span>
                        <input name="w_id" id="w_id" value="" type="text" class="form-control input-box" readonly>
                    </div>
                    <div class="form-group">
                        <label><b>Web Name : </b></label> &nbsp;<span class="validation">*</span>
                        <input name="w_name" id="w_name" type="text" class="form-control input-box" required>
                    </div>
                    <div class="form-group">
                        <label><b>Web Address : </b></label> &nbsp;<span class="validation">*</span>
                        <input name="w_address" id="w_address" type="text" class="form-control input-box" required></input>
                    </div>
                    <div class="form-group">
                        <label><b>Web Description : </b></label> &nbsp;<span class="validation">*</span>
                        <input name="w_description" id="w_description" type="text" class="form-control input-box" required></input>
                    </div>
                    <div class="form-group">
                        <label><b>Web Image : </b></label> &nbsp;<span class="validation">*</span>
                        <img src='images/".$row["web_image"]. "'width='333px;' height='200px;' name="w_image" id="w_image"/>
                    </div>                  
                </div>
                <div class="modal-footer">
                    <button type="submit" name="save" class="btn btn-primary">SAVE</button>
                    <button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>

                </div>
            </form>
        </div>
    </div>
</div>

标签： phphtmlbootstrap-modal

解决方案

正如我所看到的，您正在循环浏览面板并且那里只有一个模式，您可以做的是使用数据属性和 JS/Jquery 组合来执行此操作。

<?php
while ($row = mysqli_fetch_assoc($result)){

    $wid = $row['web_id'];
    ?>
    <div class="col-sm-4 col-xs-12">
        <div class="panel panel-default text-center">
            <div class="panel-heading">
                <h3><b><?php echo $row['web_name']; ?></b></h3>
            </div>
            <div class="panel-body">
                <?php
                if(empty($row['web_image'])){
                    echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
                }else{
                    echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
                }
                ?>
            </div>
            <div class="panel-footer">
                <h4><b><?php echo $row['web_id']; ?></b></h4>
                <a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
                <h4><?php echo $row['web_description']; ?></h4>
                <hr>
                //This is an button for view modal
                <?php echo '<button type="button" class="btn btn-success btn-sm" data-img="<?=$row['img']?>" class="viewbtn">View</button>'; ?>
                <?php echo '<a href="web_update_data.php?id='.$row['web_id'].'"><button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span>&nbsp;EDIT</button></a>';?>

            </div>
        </div>
    </div>
    <?php
}
?>

<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
            </div>
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label><b>Web Image : </b></label> &nbsp;<span class="validation">*</span>
                        <img width='333px;' height='200px;' name="w_image" id="w_image"/>
                    </div>                  
                </div>
                <div class="modal-footer">
                    <button type="submit" name="save" class="btn btn-primary">SAVE</button>
                    <button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>

                </div>
            </form>
        </div>
    </div>
</div>

现在一点点 jQuery 在模态字段中分配值并打开模态，当单击视图按钮时

$(function(){
     $(".viewbtn").click(function(){
        var img = $(this).data("img")
        $("#w_image").attr("src",img)
        $("#viewmodal").modal()
    })

})

所以，这是它的基本思想，您可以添加其他数据道具并相应地将值分配给字段

推荐阅读