如何展示关联模型记录？Backpack中特定客户端Jobs数据获取与展示

嘿，我来帮你搞定这个问题！在Backpack里实现客户端详情页展示其所有工作记录，其实不用额外创建新方法，利用Backpack自带的功能就能轻松搞定，下面分步骤说：

1. 先把模型关联关系搭好 #

这是基础中的基础，得确保你的两个模型之间的关联定义正确：

• 打开app/Models/Client.php，添加hasMany关联：

public function jobs()
{
    return $this->hasMany(Job::class);
}

• 再打开app/Models/Job.php，添加对应的belongsTo关联：

public function client()
{
    return $this->belongsTo(Client::class);
}

2. Backpack自带的简便方案：用relationship字段 #

这是最省心的方式，直接在你的ClientCrudController的setupShowOperation()方法里添加关联字段就行，Backpack会自动帮你渲染出关联数据的表格：

use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;

public function setupShowOperation()
{
    // 先配置客户端自身的展示字段，比如名称、邮箱这些
    CRUD::column('name')->label('客户端名称');
    CRUD::column('email')->label('联系邮箱');
    // ...这里可以加其他客户端需要展示的字段

    // 重点：添加关联的工作记录展示
    CRUD::column('jobs')
        ->label('关联工作记录')
        ->type('relationship')
        // 可以指定要展示的工作记录字段，按需调整
        ->columns([
            'title' => '工作标题',
            'created_at' => '创建时间',
            'status' => '状态',
        ])
        // 开启点击跳转，点击每条记录能直接进入工作记录的详情页
        ->clickable(true);
}

设置完之后，你打开客户端的详情页（show.blade.php，Backpack自带的视图，不用自己修改），就能看到一个自动生成的表格，里面列着这个客户端的所有工作记录，体验拉满！

3. 自定义展示样式（可选） #

如果你觉得自带的表格不符合需求，想自己定制展示样式，那也可以这么做：

首先在ClientCrudController的setupShowOperation()里预加载关联数据，避免N+1查询问题：

// 预加载jobs关联，优化查询性能
$this->crud->query = $this->crud->query->with('jobs');

然后复制Backpack的show视图到你的项目目录（resources/views/vendor/backpack/crud/show.blade.php），在合适的位置添加自定义展示代码，比如用列表展示：

<div class="card mt-4">
    <div class="card-header">
        <h3 class="card-title">该客户端的工作记录</h3>
    </div>
    <div class="card-body">
        @if($entry->jobs->isEmpty())
            <p class="text-muted">暂无关联的工作记录</p>
        @else
            <ul class="list-group">
                @foreach($entry->jobs as $job)
                    <li class="list-group-item">
                        <strong>{{ $job->title }}</strong> - <span class="badge bg-secondary">{{ $job->status }}</span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</div>

不过说实话，除非有特殊的样式需求，否则用Backpack自带的relationship字段已经足够方便，省不少事儿。

内容的提问来源于stack exchange，提问作者Je Siong