Создать параметры выбора на основе значения, полученного после нажатия на строку таблицы, созданную с помощью Bootstrap-таблицы, и отображения ее в модальном режиме.

Я делаю веб-приложение «для» авиакомпании, используя Laravel, мне нужно создавать таблицы, поэтому я использую Bootstrap-table. Эти таблицы содержат содержимое и имеют событие, которое активируется каждый раз, когда вы щелкаете по строке. Нажав на данные, которые у меня есть в таблице, благодаря запросу; Конечно, запрос может иметь другие поля, но не обязательно отображать их в таблице, так как в моем случае я бы «скрыл» идентификатор конкретного рейса, этот идентификатор поможет мне в запросе, я получу все места который сказал иностранный ID и что его статус также доступен. Логично, что в этом запросе я вернул бы номер своего места. И с помощью foreach создайте выбранные параметры.

Нажатие на строку показывает мне модал, в модале я бы ввел код выбора, а также, например, в своей таблице у меня есть поля Destination, Origin, Cost и т. Д., Которые они передаются в событии click, а в модальном режиме эти значения присваиваются во входных данных. Но на консультации, чтобы узнать свободные места указанного рейса, я не знаю, где это сделать. Если вам нужен код из моей использованной модели, то, что у меня есть в моем контроллере и в моем представлении, я могу предоставить его.

Код моего модала:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <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="myModalLabel">Make the reservation</h4>
                  </div>
                  <div class="modal-body">
                    <form method="post" action="/reservations" id="frm-update">
                      <input type="hidden" name="id_user" id="id_user" value="">
                      <input type="hidden" name="accion" value="register">
                      <div class="form-group">
                        <label for="dep" class="control-label">Departure:</label>
                          <input type="text" class="form-control" placeholder="Departure" id="dep" name="dep" readonly="true"></input>
                      </div>
                      <div class="form-group">
                        <label for="dest" class="control-label">Destination:</label>
                          <input type="text" class="form-control" placeholder="Destination" id="dest" name="dest" readonly="true"></input>
                      </div>
                      <div class="form-group">
                        <label for="date" class="control-label">Date:</label>
                          <input type="text" class="form-control" placeholder="Date and Hour" id="date" name="date" readonly="true"></input>
                      </div>
                      <div class="form-group">
                                <label for="seats" class="control-label">Aviable Seats:</label>
                            <select class="" name="seats">

                            </select>
                                </div>
                      <div class="form-group">
                        <label for="money" class="control-label">Cost:</label>
                          <input type="text" class="form-control" placeholder="Cost ($)" id="costo" name="costo" readonly="true"></input>
                      </div>
                      <div class="form-group">
                        <label for="money" class="control-label">Aviable Money:</label>
                          <input type="text" class="form-control" placeholder="Your aviable money" id="money" name="money" readonly="true"></input>
                      </div>
                  </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" id="evento-update" class="btn btn-primary">Make reservation</button>
                  </div>
                </div>
              </div>
            </div> <!-- Modal -->

Код моего загрузчика

<section class="row">
              <div class="col-lg-12">
                <h1 class="page-header">List of aviable flights<br> <small>Choose a flight to see details</small></h1>
              </div>
                <section class="row">
                    <section class="col-md-12">
                        <table id="tabla-pagos" data-search="false" style="background-color: #0288D1">
                            <thead>
                              <tr>
                        <th data-field="userid" data-sortable="true">ID</th>
                        <th data-field="date" data-sortable="false">Date and Time</th>
                        <th data-field="number" data-sortable="false">Flight Number</th>
                        <th data-field="seats" data-sortable="false">Airplane Seats</th>
                        <th data-field="departure" data-sortable="false">Departure</th>
                        <th data-field="destination" data-sortable="false">Destination</th>
                              </tr>
                            </thead>
                        </table>
                    </section>
                </section>
            </section> <br>

С другой стороны, javascript, где для заполнения используется запрос ajax таблицу и, щелкнув по строке, передайте данные модалу.

<script type="text/javascript" charset="utf-8">
    $(function(){
        var $table  =   $("#tabla-pagos");
        $table.bootstrapTable();//convertir una tabla en un objeto de bootstrap table

        $.ajax({
            url: '/reservations',
            type: 'POST',
            dataType: 'json',
            data: {accion: 'consulta'},
        })
        .done(function(response) {
            $table.bootstrapTable('showLoading');
            if(response.length>0){
                $table.bootstrapTable('destroy');
                $table.bootstrapTable({data: response});
            }
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            $table.bootstrapTable('hideLoading');
            console.log("complete");
        })
      $table.on('click-row.bs.table', function(row, $element){
        $('#myModal').modal('toggle');
        $('#id_user').val($element.userid);
        $('#dep').val($element.departure)
        $('#dest').val($element.destination)
        $('#date').val($element.date)
        $('#costo').val($element.costo)
      });
      $("#evento-update").on('click', function(event){
        event.preventDefault();
        event.stopPropagation();
        $('#frm-update').submit();
      })
    });
    </script>

В моем контроллере у меня есть 2 функции

public function reservation() {
        if (Request::method() == 'GET'){
            return View::make('user.reservation');

        }
        else {
            switch (Input::get('accion')) {
      case 'consulta':
        return $this->consultaReservations();
        break;
      case 'register':
                    $idu = Auth::id();
                    $user = Pasajero::where('usuarios_id','=', $idu)->first();
                    $Id = $user->id;
                    $reservation = new Reservation();
                    $reservation->vuelo_id = Input::get('id_user');
                    $reservation->pasajeros_id = $Id;
                    $reservation->save();
                    return Redirect::back()
                    ->with('reser', "You have made a reservation");
        break;
      default:
          return array();
        break;
        }
        }
    }

//Consulta de todos los vuelos disponibles para el usuario
    private function consultaReservations(){
        $id = Auth::id();
        $consulta = DB::table('vuelos')
    ->join('origenes', 'origenes.id', '=', 'vuelos.origen_id')
    ->join('destinos', 'destinos.id', '=', 'vuelos.destino_id')
        ->join('aviones', 'aviones.id', '=', 'vuelos.avion_id')
        ->select('vuelos.id as userid','vuelos.fecha as date', 'vuelos.numero_vuelo as number', 'vuelos.costo as costo',
        'aviones.num_asientos as seats', 'origenes.nombre_origen as departure', 'destinos.nombre_destino as destination')
    ->get();
        return $consulta;
  }

ОБНОВЛЕНИЕ:

Код запроса, который принесет мне доступные места, у меня уже есть, это:

выберите seat.number_seat в качестве num_seat из рейсов

присоединиться к источникам на origins.id = flight.origen_id

присоединиться к пунктам назначения destin.id = destiny_id flight

присоединиться к самолетам на planes.id = tickets.avion_id

присоединиться к местам на seat.aviones_id = planes.id

где seat.estado_aciento = "Доступно"

и flight.id = 1;

Дело здесь

where asientos.estado_aciento = "Disponible" and vuelos.id = 1;

Я знаю, что там, где у меня есть 1, я должен отправьте полученный идентификатор, щелкнув по строке, и, таким образом, с помощью этого запроса сможете сгенерировать параметры выбора.

0
задан 22.02.2017, 00:16
1 ответ

Кликнув в линии сгибается событие onclick и выполняется твоя функция, чтобы поднимать модального, внутри этой же самой функции ты должен размещать консультацию ajax, что вручил тебе количество доступных сидений

0
ответ дан 24.11.2019, 13:52
  • 1
    Это быть должным и # 237; чтобы быть комментарием и не ответом. – Shaz 10.07.2016, 06:41
  • 2
    Что такая большая проблема для меня... у меня нет достаточных знаний AJAX, – YelloWhale 10.07.2016, 06:42
  • 3
    В jsfiddle ты можешь размещать код, чтобы это проверять и давать тебе ответ. – nerdcoder 10.07.2016, 06:43
  • 4
    termin и # 233; размещая aqu и # 237; сам... c – YelloWhale 10.07.2016, 06:50
  • 5
    Я верю в то, что в jsfiddle не быть и # 237; в и #250; til действительно, так как весь informaci и # 243; n я получаю ее от моего сервера локального BD. и #191; или если стоит помещать это ах и # 237;? Хотя он использует blade и ты сшил туз и # 237;... не быть и # 237; чтобы экспортировать js и css bootstrap table. – YelloWhale 10.07.2016, 06:51

Теги

Похожие вопросы