javascript - 需要模态形式，从 Mysql 获取所有详细信息并通过 java 脚本在 php 表上显示

Question

*如果我点击查看按钮，它应该显示来自 mysql 的所有详细信息并以模式显示。需要 javascript 进行查看，and(( mysql is select * from tbl_name(user))) mysql 代码也是如此。我对 javascript、php 不太了解，因为我是新手。请帮我解决这个问题。如果我单击查看按钮，它应该显示来自 mysql 的所有详细信息并以模式显示。需要 javascript 进行查看,and(( mysql is select * from tbl_name(user))) mysql 代码也是。我对 javascript、php 不太了解，因为我是新手。请帮我解决这个问题 *

var $table = $('table');
 $table.bootstrapTable({
     search: true,
     pagination: true,
     buttonsClass: 'primary',
     showFooter: true,
     minimumCountColumns: 2,
     columns: [{
             field: 'id',
             title: 'ID',
             sortable: true,
         }, {
             field: 'zonee',
             title: 'ZONEName',
             sortable: true,
         }, {
             field: 'location',
             title: 'LOCATION',
             sortable: true,
         },
         {
             field: 'pop_type',
             title: 'POP TYPE',
             sortable: true,
         },
         {
             field: 'switch_name',
             title: 'SWITCH NAME',
             sortable: true,
         },
         {
             field: 'switch_ip',
             title: 'SWITCH IP',
             sortable: true,
         },
         {
             field: 'switch_make',
             title: 'SWITCH MAKE ',
             sortable: true,
         },
         {
             field: 'switch_serial',
             title: 'SWITCH SERIAL',
             sortable: true,
         },
         {
             field: 'switch_model',
             title: 'SWITCH MODEL',
             sortable: true,
         },
         {

             title: 'OPERATIONS',
         },
         {
             field: 'operation',
             title: 'Action',
         },
     ],

 });



 $(document).ready(function() {
     $(document).on('click', '.model_form', function() {
         $('#form_modal').modal({
             keyboard: false,
             show: true,
             backdrop: 'static'
         });
         var data = eval($(this).attr('data'));
         $('#id').val(data.id);
         $('#zonee').val(data.zonee);
         $('#location').val(data.location);
         $('#pop_type').val(data.pop_type);
         $('#switch_name').val(data.switch_name);
         $('#switch_ip').val(data.switch_ip);
         $('#switch_make').val(data.switch_make);
         $('#switch_serial').val(data.switch_serial);
         $('#switch_model').val(data.switch_model);
         $('#latitude').val(data.latitude);
         $('#longitude').val(data.longitude);
         if (data.id != "")
             $('#pop_title').html('Edit');
         else
             $('#pop_title').html('Add');
     });

     $(document).on('click', '.delete_check', function() {
         if (confirm("Are you sure to delete data")) {
             var current_element = $(this);
             url = "add_edit.php";
             $.ajax({
                 type: "POST",
                 url: url,
                 data: {
                     ct_id: $(current_element).attr('data')
                 },
                 success: function(data) { //location.reload(); 
                     $('.' + $(current_element).attr('data') + '_del').animate({
                         backgroundColor: "#003"
                     }, "slow").animate({
                         opacity: "hide"
                     }, "slow");
                 }
             });
         }
     });
 });

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

<div class="row">
    <div class="col-md-12"></div>
    <div class="col-md-4">
        <?php $apage = array('id'=>'','name'=>'');?>
        <script>
            var page_0 = <?php echo json_encode($apage)?>
        </script>
        <h3><a data="page_0" class="model_form btn btn-sm btn-danger" href="#"><span class="glyphicon glyphicon-plus"></span> Add new record</a></h3>
    </div>
</div>

<div id="table-container">
    <div class="row">
        <div class="col-md-12">
            <table id="table" class="table table-striped table-sortable table-condensed  " cellspacing="0" width="100%" data-show-columns="true">
                <tbody>
                    <?php if(isset($result) && ($data_record) > 0)  : $i=1; ?>                      <?php  while ($users = mysqli_fetch_object($result)) { ?>
                    <tr class="<?=$users->id?>_del">
                        <td>
                            <?=$i;?>
                        </td>
                        <td>
                            <?=$users->zonee;?>
                        </td>
                        <td>
                            <?=$users->location;?>
                        </td>
                        <td>
                            <?=$users->pop_type;?>
                        </td>
                        <td>
                            <?=$users->switch_name;?>
                        </td>
                        <td>
                            <?=$users->switch_ip;?>
                        </td>
                        <td>
                            <?=$users->switch_make;?>
                        </td>
                        <td>
                            <?=$users->switch_serial;?>
                        </td>
                        <td>
                            <?=$users->switch_model;?>
                        </td>

                        <td> <a href="http://maps.google.com/?q=<?=$users->latitude;?>,<?=$users->longitude;?>" target=\ "_blank\"><i class="material-icons">&#xE0C8;</i></a></td>

                        <script>
                            var page_ <?php echo $users->id ?> = <?php echo json_encode($users);?>
                        </script>

                        <td><a data="<?php echo 'page_'.$users->id ?>" class="model_form btn btn-info btn-sm" href="#"> <span class="glyphicon glyphicon-pencil"></span></a>

                            <a data="<?php echo  $users->id ?>" title="Delete <?php echo $users->name;?>" class="tip delete_check btn btn-info btn-sm "><span class="glyphicon glyphicon-remove"></span> </a>

                            <a data="<?php echo 'page_'.$users->id ?>" class="model_form btn btn-info btn-sm" href="#"> <span class="glyphicon glyphicon-view"></span></a>

                        </td>
                    </tr>
                    <?php $i++; } ?>
                    <?php else : echo '<tr><td colspan="8"><div align="center">-------No record found -----</div></td></tr>'; ?>
                    <?php endif; ?>
                </tbody>
            </table>
            <?php
              if(isset($_SESSION['flash_msg'])) :  
               $message = $_SESSION['flash_msg'];
               echo $error= '<div class="alert alert-success" role="alert">
               <span class="glyphicon glyphicon-envelope"></span> <strong>'.$message.'</strong> </div>';
               unset($_SESSION['flash_msg']);
              endif;
          ?>
        </div>
    </div>
</div>


<!-- Form modal -->
<div id="form_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="icon-paragraph-justify2"></i><span id="pop_title">ADD</span> POP INFORMATION</h4>
            </div>
            <!-- Form inside modal -->
            <form method="post" action="add_edit.php" id="cat_form">
                <div class="modal-body with-padding">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>zonee :</label>
                                <input type="text" name="zonee" id="zonee" class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>location :</label>
                                <input type="text" name="location" id="location" class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>pop_type :</label>
                                <input type="text" name="pop_type" id="pop_type" class="form-control required number">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>switch_name:</label>
                                <input type="text" name="switch_name" id="switch_name" class="form-control required number">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>switch_ip :</label>
                                <input type="text" name="switch_ip" id="switch_ip" class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>switch_make :</label>
                                <input type="text" name="switch_make" id="switch_make" class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>switch_serial :</label>
                                <input type="text" name="switch_serial" id="switch_serial" class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>switch_model :</label>
                                <input type="text" name="switch_model" id="switch_model" class="form-control required">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>Latitude:</label>
                                <input type="text" name="latitude" id="latitude" class="form-control required">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label>Longitude:</label>
                                <input type="text" name="longitude" id="longitude" class="form-control required">
                            </div>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                    <span id="add">
              <input type="hidden" name="id" value="" id="id">
              <button type="submit" name="form_data" class="btn btn-primary">Submit</button>
            </span>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

由于您没有提供有关“查看”按钮的更多详细信息，因此我假设它是这一部分

<a data="<?php echo 'page_'.$users->id ?>" class="model_form btn btn-info btn-sm viewuser" href="#"> <span class="glyphicon glyphicon-view"></span></a>

正如你所看到的，我已经为上面分配了新的类“viewuser”。 所以你想当有人点击上面的 View 按钮时显示模式弹出窗口。简单的算法是

1. 对“viewuser”使用 onclick() 并捕获点击
2. 获取包含用户 ID 的“data”属性
3. 进行 Ajax 调用(就像上面删除操作时所做的那样)并获取该用户的数据
4. 现在您已经有了数据，并将其显示在模态弹出窗口中

与上述相关的一些代码是

 <script>
      $('.viewuser').click(function(){
          var userid=$(this).attr('data');

          url = "add_edit.php";
             $.ajax({
                 type: "POST",
                 url: url,
                 data: {
                     userid: userid
                 },
                 success: function(data) {
                    //display data whatever way you wanted
                    // for modal popup you can do thi to show a modal popup
                    //$('#viewpopup').modal('show');
                 }
             });

      });
  </script>