如何在Laravel Backpack中基于行数据自定义列表表格整行样式

问题描述 #

当前团队成员列表的展示效果如下：

现有实现代码如下：

protected function setupListOperation()
{
    ...
    $this->crud->addColumn([
        'name' => 'name',
        'label' => "Name", 
        'type' => 'name',
        'wrapper'   => [
            'style' => function ($crud, $column, $entry, $related_key) {
                return ("color:$entry->secondary_color ;background-color:$entry->primary_color;");
            },
        ],
    ]);
    ...
}

目前该样式仅生效于Name列，需要将对应的背景色和文字色应用到整行，最终实现效果如下图：

已查阅Backpack官方文档，尝试查找类似wrapper()方法、$this->crud->ColumnCSS()这类可以修改行CSS的API，但未找到相关内容。
请问该需求是否可实现？如何获取当前行的数据变量并绑定到对应行的CSS样式上？

解决方案 #

该需求可直接通过Backpack原生提供的API实现。
在setupListOperation()方法中调用setRowAttributes()方法即可为整行动态绑定样式，示例代码如下：

protected function setupListOperation()
{
    // 原有其他配置逻辑
    ...

    // 新增整行样式配置
    $this->crud->setRowAttributes(function($entry) {
        return [
            'style' => "color: {$entry->secondary_color}; background-color: {$entry->primary_color};"
        ];
    });

    // 原有列配置逻辑，建议删除原Name列中单独配置的wrapper样式，避免样式覆盖冲突
    $this->crud->addColumn([
        'name' => 'name',
        'label' => "Name", 
        'type' => 'name',
    ]);
    ...
}

实现说明 #

• 传入setRowAttributes()的闭包会自动接收当前行对应的模型实例$entry作为参数，可以直接读取模型上的字段值生成动态样式。
• 方法返回的关联数组会直接作为<tr>标签的属性生效，除了style外也可以自定义class等其他属性。
• 原有单个列的wrapper配置优先级高于行属性，如果保留会覆盖行级的颜色设置，建议删除不需要的单列样式配置。

内容的提问来源于stack exchange，提问作者Nish Dekardo