Codeigniter：带表数据的Bootstrap模态

Question

我有一个使用foreach循环填充的数据表，如下所示：

<table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Keyboard Language</th>
          <th scope="col">PC Spec</th>
          <th scope="col">Desk Position</th>
          <th scope="col">Price Per Hour</th>
          <th scope="col">Hours</th>
          <th scope="col">Total Price</th>
          <th scope="col">Confirm</th>
        </tr>
      </thead>
      <tbody>
        <?php $increment =1; ?>
        <!--print each item in a new row on the table -->
        <?php foreach($bookingData as $booking_item) { ?>
        <tr>
          <td><?php echo $increment ?></td>
          <td><?php echo $booking_item['item']; ?></td>
          <td><?php echo $booking_item['item1']; ?></td>
          <td><?php echo $booking_item['item2']; ?></td>
          <td><?php echo '£ '. $booking_item['item3']; ?></td>
          <td><?php echo $userEntered['item4']; ?></td>
          <td><?php echo '£ '.$userEntered['item5'] * $booking_item['item6']; ?></td>
          <?php $totalPrice = $userEntered['item7'] * $booking_item['item7'];?>
            <td><button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter<?php echo $increment; ?>"><i class="fa fa-calendar-check" style="color: white;"></i>Book now!</button></td>
        </tr>
      <?php $increment++; } ?>
      </tbody>
    </table>

我在每个表格行中都有按钮，我想创建一个弹出的模态，要求用户使用下面的模态代码确认操作：

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <?php echo $booking_item['item1']?>
        <?php echo $booking_item['item2']?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Confirm Booking!</button>
      </div>
    </div>
  </div>
</div>

但是，我对于如何将每行数据加载到每个表行的模态中感到难过，我之前已经在另一个项目中完成了这个但是我不能记住如何复制它

Answer 1

首先将id属性添加到确认按钮，并将所有数据存储在data属性中，就像我在下面的代码中所做的那样。

在您的模态中添加form以提交存储在隐藏输入字段中的数据。

修改

根据您的回答，我已更新了我的代码

您的按钮

<button class="btn btn-success" id="confirmBtn"
    data-specs="<?php echo $booking_item['specs'];?>"
    data-date="<?php echo $userEntered['date'];?>"
    data-start="<?php echo $userEntered['start_time'];?>"
    data-end="<?php echo $userEntered['end_time'];?>"
    data-totalprice="<?php echo $totalPrice;?>"
    data-hours="<?php echo $userEntered['hours_booked'];?>">
       <i class="fa fa-calendar-check" style="color: white;"></i>Book now!
</button>

您的模态代码

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="<?php echo base_url(); ?>your_controller_name/confirm_book" method="post">
        <div class="modal-body">

         <input type="hidden" name="id" id="bookId" />
         <input type="hidden" name="specs" id="specs" />
         <input type="hidden" name="date" id="date" />
         <input type="hidden" name="start_time" id="start_time" />
         <input type="hidden" name="end_time" id="end_time" />
         <input type="hidden" name="totalPrice" id="totalPrice" />
         <input type="hidden" name="hours_booked" id="hours_booked" />
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary">Confirm Booking!</button>
       </div>
    </form>
    </div>
  </div>
</div>

这是你的jquery代码，可以完成你的所有工作。

Jquery代码

$('#confirmBtn').on('click', function (e) {
    e.preventDefault();
    var id = $(this).data('id');  //takes the `id` from your button
    var specs = $(this).data('specs');
    var date = $(this).data('date');
    var start_time = $(this).data('start_time');
    var end_time = $(this).data('end_time');
    var totalPrice = $(this).data('totalPrice');
    var hours_booked = $(this).data('hours_booked');

    $("#exampleModalCenter #bookId").val(id); //stores to modal hidden field
    $("#exampleModalCenter #specs").val(specs);
    $("#exampleModalCenter #date").val(date);
    $("#exampleModalCenter #start_time").val(start_time);
    $("#exampleModalCenter #end_time").val(end_time);
    $("#exampleModalCenter #totalPrice").val(totalPrice);
    $("#exampleModalCenter #hours_booked").val(hours_booked);

    $('#exampleModalCenter').modal();
});

这是控制器代码

public function confirm_book(){
    $id = $this->input->post('id');
    $specs= $this->input->post('specs');
    $date= $this->input->post('date');
    $start_date= $this->input->post('start_date');
    $end_date= $this->input->post('end_date');
    $totalPrice= $this->input->post('totalPrice');
    $hours_booked= $this->input->post('hours_booked');

    //do whatever you want to do with these data
}

希望这会对你有所帮助。

Answer 2

对于要加载的模态，每个触发器需要单独的模型内容。所以你也需要foreach中的模型内容。

      <?php foreach

         <td><button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter<?php echo $increment; ?>"><i class="fa fa-calendar-check" style="color: white;"></i>Book now!</button></td>
        foreach end
        ?>

    <?php foreach
    $increment =0;
      <div class="modal fade" id="exampleModalCenter#exampleModalCenter<?php echo $increment; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
model content
</div>
</div>
    $increment++;
    foreach end
    ?>

我希望你明白我要告诉你的是什么。你还需要循环模态并使id动态化。

Answer 3

我设法通过使用一些简单的JQuery和数据属性来实现这一目标。我在foreach循环期间将数据属性传递给按钮，所以我的按钮现在看起来像这样：

<button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter"
                      data-specs="PC Specs: <?php echo $booking_item['specs'];?>"
                      data-date="Date: <?php echo $userEntered['date'];?>"
                      data-start="Start: <?php echo $userEntered['start_time'];?>"
                      data-end="End : <?php echo $userEntered['end_time'];?>"
                      data-totalprice="Total Price : <?php echo $totalPrice;?>"
                      data-hours="Hours : <?php echo $userEntered['hours_booked'];?>">
                <i class="fa fa-calendar-check" style="color: white;"></i>Book now!
          </button>

现在在我的Jquery中，我获取这些值并设置我在模态中建立的类的文本

$('#exampleModalCenter').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) //button that triggers modal
    var spec = button.data('specs') // Extract info from data-* attributes
    var date = button.data('date')
    var start = button.data('start')
    var end = button.data('end')
    var hours = button.data('hours')
    var totalPrice = button.data('totalprice')

    var modal = $(this)
    modal.find('.specs').text(spec)
    modal.find('.date').text(date)
    modal.find('.start').text(start)
    modal.find('.end').text(end)
    modal.find('.hours').text(hours)
    modal.find('.totalprice').text(totalPrice)
  })

我在https://getbootstrap.com/docs/4.0/components/modal/

找到了这个