Модульная интеграция Boostrap в Laravel Table - PullRequest
Новая
       14

Модульная интеграция Boostrap в Laravel Table

0 голосов
/ 06 июня 2018

У меня есть дата данных 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>

Может ли кто-нибудь помочь мне, как я могу реализовать этот модальный в строке данных? В основном я хочу, чтобы каждый раз, когда пользователь нажимал кнопку показа изображения, чтобы открыть модал с изображением внутри Заранее спасибо

1 Ответ

0 голосов
/ 06 июня 2018

Вероятно, проще всего, если вы добавите в кнопку уникальный класс (скажем ... '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">

Затем замените src в $("#modalImage")элемент с вашим новым источником и триггером.Есть много вариантов и веток, и вам нужно будет заново подстроиться под свои нужды, но это должно помочь вам начать работу.

...