Question

我有一个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>

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

Answer 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。有很多选项和分支，你需要重新适应，但这应该让你开始。

laravel表中的Boostrap模态集成

1 个答案: