Codeigniter：带有表数据的引导模式

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

对于要加载的模式，每个触发器都需要单独的模型内容。所以你还需要 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 2

我设法通过使用一些简单的 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/

Answer 3

首先将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
}

希望这会对你有所帮助。