Передача данных из нескольких строк из таблицы в модальный режим - PullRequest
2 голосов
/ 04 марта 2020

Я работаю над проектами Laravel и Bootstrap и в настоящее время выполняю функцию обновления для нескольких строк, используя модальное время. У меня есть таблица с флажком в каждой строке:

<?php $No = 1; ?>

        <table id="tbl_pengadaan"  class="table table-bordered table-striped table-responsive">
            <thead>
            <tr>
              <th ><input type="checkbox" name="cb_all" id="checkall"></th>
              <th >No</th>
              <th >No PR</th>
              <th >PR Line</th>
              <th >Shopping Cart</th>
              <th >PR Received Date</th>
              <th >PGr</th>
              <th >No Material</th>
              <th style="width: 400px">Nama Material</th>
              <th >Qty</th>
              <th >UoM</th>
              <th >Unit Price</th>
              <th >Total Budget</th>
              <th >PR Currency</th>
              <th >No RFx</th>
              <th style="width: 250px">Judul RFx</th>
              <th >Tgl RFx</th>
              <th >Submission Deadline</th>
              <th >Tgl Opening Tender</th>
              <th >TE Mulai</th>
              <th >TE Sampai</th>
              <th >Negosiasi Mulai</th>
              <th >Negosiasi Sampai</th>
              <th >Klarifikasi Mulai</th>
              <th >Klarifikasi Sampai</th>
              <th >No PO</th>
              <th >PO Line</th>
              <th >Created at</th>
              <th >Updated at</th>
              @role('admin')
                <th>Action</th>
              @endrole  
            </tr>
            </thead>
            <tbody>
              @foreach($pengadaans as $row)  
                <tr>
                  <!-- <td>{{$row->id}}</td>  -->
                  <td>
                    <input type="checkbox" name="cb_mark" id="cb{{$No}}"
                          data-target="#modal-edit-pengadaan" 
                          data-pr_no="{{$row->pr_no}}"
                    >
                  </td>
                  <td>{{$No}}</td>
                  <td>{{$row->pr_no}}</a></td>
                  <td>{{$row->pr_line}}</td>
                  <td>{{$row->shopping_cart}}</td>
                  <td>{{ \Carbon\Carbon::parse($row->transfer_date)->format('d-M-Y') }}</td>
                  <td>{{$row->pgr}}</td>
                  <td>{{$row->no_material}}</td>
                  <td>{{$row->nama_material}}</td>
                  <td align="right">{{$row->quantity}}</td>
                  <td>{{$row->uom}}</td>
                  <td align="right">{{number_format($row->unit_price,2)}}</td>
                  <td align="right">{{number_format($row->total_budget,2)}}</td>
                  <td>{{$row->pr_cur}}</td>
                  <td>{{$row->rfx}}</td>
                  <td>{{$row->rfx_title}}</td>
                  <td style="white-space: nowrap">{{ $row->rfx_date ? \Carbon\Carbon::parse($row->rfx_date)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->sub_deadline ? \Carbon\Carbon::parse($row->sub_deadline)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->tgl_opening ? \Carbon\Carbon::parse($row->tgl_opening)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->te_start ? \Carbon\Carbon::parse($row->te_start)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->te_to ? \Carbon\Carbon::parse($row->te_to)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->nego_start ? \Carbon\Carbon::parse($row->nego_start)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->nego_to ? \Carbon\Carbon::parse($row->nego_to)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->clarification_start ? \Carbon\Carbon::parse($row->clarification_start)->format('d-M-Y') : "" }}</td>
                  <td style="white-space: nowrap">{{ $row->clarification_to ? \Carbon\Carbon::parse($row->clarification_to)->format('d-M-Y') : "" }}</td>
                  <td>{{$row->po_no}}</td>
                  <td>{{$row->po_line}}</td>
                  <td style="white-space: nowrap">{{$row->created_at}}</td>
                  <td style="white-space: nowrap">{{$row->updated_at}}</td>
                  <td>
                    hapus
                  </td>
                </tr>
                <?php $No++; ?>
                @endforeach

            </tbody>

          </table>

Я хочу передать некоторые данные из проверенных строк в модальное. Вот модальный код:

<!-- [start] Modal edit pengadaan -->
      <div class="modal fade" id="modal-edit-pengadaan">
        <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="top: 100px">
          <form method="post" action="pengadaan/update">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit data pengadaan</h5>
          </div>
          <div class="modal-body">
            {{ csrf_field() }}
            <table>
              <tr>
                <th>No PR</th>
              </tr>
              <!--
              <tr>
                <td><input type="text" class="form-control" name="no_pr" id="no_pr" value="no_pr (based on checked row)"></td>
              </tr>
              -->
            </table>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save Changes</button>
          </div>
        </form>
        </div>
        </div>
      </div>
    <!-- [end] Modal edit pengadaan -->

Вот моя кнопка, которая вызывает модальный

     <button type="button" style="float:right; margin-right: 3px"  class="btn btn-info" data-toggle="modal" data-target="#modal-edit-pengadaan">
        <i class="fa fa-pencil"></i>  Edit Selected
      </button>

А вот мой javascript код:

$('#modal-edit-pengadaan').on('show.bs.modal', function (event) {

      var rowCount = ($('#tbl_pengadaan tr').length)-1;
      console.log('test' + rowCount);


    if ( event.relatedTarget != null) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var cbrow = document.getElementById("cb1");
    }

    var no_pr = cbrow.data('pr_no')

    var modal = $(this)
    //modal.find('.modal-title').text('New message to ' + recipient)

    modal.find('.modal-body #jlh_row').text(no_pr)

    })

Я хочу, чтобы строка таблицы в Модале могла быть сгенерирована на основе проверенных строк.

Заранее спасибо

1 Ответ

0 голосов
/ 04 марта 2020

Таким образом, следующие шаги:

  1. Сохраните модальный элемент для добавления ваших строк в переменную var modalRowContent = //your selector

  2. Найти проверенные th элементы

  3. Найти родительские строки tr
  4. Добавить строки в modalRowContent

Код может выглядеть примерно так :

var modalRowContent = $('#sectionToAppendTo'); // 1
var checkedRows = $('th input:checked').closest('tr'); //2 + 3
modalRowContent.append(checkedRows);// 4

Или вы можете связать все это

// 1                    // 4      // 2                // 3
$('#sectionToAppendTo').append( $('th input:checked').closest('tr') );

ПРИМЕЧАНИЕ. Я не проверял этот код. Пожалуйста, не считайте это рабочим ответом.

...