Laravel 表中的 Bootstrap 模态集成答案

【问题标题】：Boostrap modal integration in laravel tableLaravel 表中的 Bootstrap 模态集成
【发布时间】：2018-11-16 13:41:38
【问题描述】：

我有一个如下的 laravel 数据表：

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/>
</head>

这是桌子：

<td><button 
   type="button" 
   class="btn btn-primary btn-lg" 
   data-toggle="modal" 
   data-target="#favoritesModal">
  Add to Favorites
</button></td>

我在这里创建了模态：

<div class="modal fade" id="favoritesModal" 
     tabindex="-1" role="dialog" 
     aria-labelledby="favoritesModalLabel">
  <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>
        <h4 class="modal-title" 
        id="favoritesModalLabel">The Sun Also Rises</h4>
      </div>
      <div class="modal-body">
        <p>
        Please confirm you would like to add 
        <b><span id="fav-title">The Sun Also Rises</span></b> 
        to your favorites list.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" 
           class="btn btn-default" 
           data-dismiss="modal">Close</button>
        <span class="pull-right">
          <button type="button" class="btn btn-primary">
            Add to Favorites
          </button>
        </span>
      </div>
    </div>
  </div>
</div>

谁能帮助我如何在数据表行中实现此模式？ 基本上我希望每次用户单击按钮时都显示图像以打开带有图像的模式 提前致谢

【问题讨论】：

标签： php html laravel datatable bootstrap-modal

【解决方案1】：

如果您向按钮添加一个独特的类（例如...“imageButton”）以及一个 data-image-id 来识别您想要的图像，这可能是最简单的。如果您想要单独的标题，您可能希望在同一个按钮上添加一个 data-img-title。

所以 - 有点像这样：

<td><button 
   type="button" 
   class="btn btn-primary btn-lg imageButton" 
   data-toggle="modal" 
   data-img-title ="{{$looped->title}}"
   data-img-id = "{{$looped->id}}"
   data-target="#favoritesModal">
   Add to Favorites
</button></td>

然后，一些 jquery AJAX 从您的控制器获取图像数据，然后将该 HTML 放置在模式中。像这样的：

 $('.imageButton').on('click', function () {
        var imgTitle = $(this).data('img-title');
        var imgId = $(this).data('img-id');
        $.ajax({
            url: "{{url('url_for_your_image_returning_controller_method)}}" + "/" + imgId,
            type: "GET",
            success: function (h) {
                $(".modal-title").text(imgTitle);
                $(".modal-body").html(h);
                $('#modal').modal();
            },
            error: function () {
                swal("Error", "Unable to bring up the creation dialog.", "error");
            }
        })
    });

这取决于您发送的内容。如果您还想显示缩略图，您还可以选择创建一个图像标签，并通过新的 src 而不是照片数据发送类似这样的内容：

<img id="modalImage" src="{{url('images')."/".(isset($image->thumb)?$image->thumb:$image->image)}}"
              class="picToModal">

然后用您的新源和触发器替换 $("#modalImage") 元素中的 src。有很多选项和分支，您需要重新工作以适应，但这应该可以帮助您入门。

【讨论】：

我在 URL 后的 _method 后留下了一个单引号。添加'，它应该可以工作。目的不是让您只是复制粘贴，而是为您提供有关其工作原理的指南 - 语法错误无法承受。再试一次，但您需要对其进行调整以使其成为您自己的，并确保它适合您。