Laravel 5.3中如何为Bootstrap模态框传递foreach循环数组数据

嘿，我来帮你搞定这个问题！你现在需要实现的是点击表格每行的详情按钮，在Bootstrap模态框里展示对应业务的专属详情数据对吧？下面给你两种实用的方案，你可以根据自己的场景选择：

方案1：单模态框+JavaScript动态填充（推荐，适合大量数据） #

这个方案只需要一个模态框，通过Bootstrap的data-*属性传递数据，再用JS动态渲染内容，性能更优。

步骤1：修改表格行的详情按钮 #

在循环里给按钮添加data-details属性，把当前业务的详情数据转成JSON格式存进去：

<div class="table-responsive">
  <table class="table table-bordered m-table" id="business">
    <thead class="columns">
      <tr>
        <th class="column1">Name</th>
        <th class="column2">Contact</th>
        <th class="column3">Details</th>
      </tr>
    </thead>
    <tbody class="main-rows list">
      @foreach ($listBusiness as $business)
      <tr>
        <td class="column1">{{$business->name}}</td>
        <td class="column2">{{$business->contact}}</td>
        <td class="column7">
          <!-- 添加data-details属性传递详情数据 -->
          <a data-toggle="modal" data-target="#modalBusinessDetails" data-details="{{ json_encode($business->details) }}">
            <i class="la la-search"></i>
          </a>
        </td>
      </tr>
      @endforeach
    </tbody>
  </table>
</div>

步骤2：修改模态框结构，预留动态填充位置 #

把模态框里的表格tbody改成空的，添加一个ID方便JS定位：

<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="col-12">
          <div class="table-responsive">
            <table class="table table-bordered m-table">
              <thead class="columns">
                <tr>
                  <th class="column1">Created at</th>
                  <th class="column2">Active</th>
                  <th class="column3">Employees</th>
                </tr>
              </thead>
              <!-- 添加ID用于JS填充内容 -->
              <tbody class="main-rows" id="modal-details-body">
              </tbody>
            </table>
          </div>
        </div>
        <div class="btn group">
          <button type="button" data-dismiss="modal">{{ trans('Close') }}</button>
        </div>
      </div>
    </div>
  </div>
</div>

步骤3：添加JavaScript监听模态框事件 #

监听模态框的show.bs.modal事件，获取传递的详情数据并动态生成表格行：

<script>
$('#modalBusinessDetails').on('show.bs.modal', function (event) {
  // 获取触发模态框的按钮
  var triggerBtn = $(event.relatedTarget);
  // 解析按钮上的详情数据（JSON转成JS对象）
  var businessDetails = JSON.parse(triggerBtn.data('details'));
  var modal = $(this);
  var tableBody = modal.find('#modal-details-body');
  
  // 清空之前的内容，避免残留数据
  tableBody.empty();
  
  // 循环生成每行数据
  $.each(businessDetails, function(index, detail) {
    var rowHtml = `
      <tr>
        <td class="column1">${detail.created_at}</td>
        <td class="column2">${detail.active}</td>
        <td class="column3 text-center">${detail.employees}</td>
      </tr>
    `;
    tableBody.append(rowHtml);
  });
});
</script>

方案2：为每行生成独立模态框（适合数据量小的场景） #

如果你的业务数据不多，可以直接在循环里为每行生成一个专属的模态框，不需要JS处理，直接用Blade渲染内容。

修改后的完整代码 #

<div class="table-responsive">
  <table class="table table-bordered m-table" id="business">
    <thead class="columns">
      <tr>
        <th class="column1">Name</th>
        <th class="column2">Contact</th>
        <th class="column3">Details</th>
      </tr>
    </thead>
    <tbody class="main-rows list">
      @foreach ($listBusiness as $business)
      <tr>
        <td class="column1">{{$business->name}}</td>
        <td class="column2">{{$business->contact}}</td>
        <td class="column7">
          <!-- 目标指向当前行专属的模态框ID -->
          <a data-toggle="modal" data-target="#modalBusinessDetails-{{ $business->id }}">
            <i class="la la-search"></i>
          </a>
        </td>
      </tr>

      <!-- 当前业务专属的模态框 -->
      <div class="modal" id="modalBusinessDetails-{{ $business->id }}" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body text-center">
              <div class="col-12">
                <div class="table-responsive">
                  <table class="table table-bordered m-table">
                    <thead class="columns">
                      <tr>
                        <th class="column1">Created at</th>
                        <th class="column2">Active</th>
                        <th class="column3">Employees</th>
                      </tr>
                    </thead>
                    <tbody class="main-rows">
                      <!-- 直接渲染当前业务的详情数据 -->
                      @foreach ($business->details as $BusinessDetail)
                      <tr>
                        <td class="column1">{{$BusinessDetail->created_at}}</td>
                        <td class="column2">{{$BusinessDetail->active}}</td>
                        <td class="column3 text-center">{{$BusinessDetail->employees}}</td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="btn group">
                <button type="button" data-dismiss="modal">{{ trans('Close') }}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      @endforeach
    </tbody>
  </table>
</div>

关键准备工作（控制器端） #

不管用哪种方案，你都需要在控制器里给每个$business预加载对应的详情数据，避免N+1查询问题：

// 控制器代码示例
public function index()
{
    // 预加载details关联数据
    $listBusiness = \App\Business::with('details')->get();
    return view('your-view-name', compact('listBusiness'));
}

同时确保你的Business模型已经定义了与详情模型的关联：

// app/Business.php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Business extends Model
{
    public function details()
    {
        // 假设你的详情模型是BusinessDetail，关联字段是business_id
        return $this->hasMany(BusinessDetail::class);
    }
}

内容的提问来源于stack exchange，提问作者Ferran Muñoz