Laravel 的背包 - 如何显示 color_picker 字段的彩色矩形列？

Question

我目前面临着在 laravel 背包中的一个 CRUD 中显示颜色选择器值的挑战。我的一个 CRUD 具有颜色属性，我在创建新条目时使用了 color_picker 字段。

我不想只显示所选颜色的字符串值，我想显示一个包含所选颜色的矩形，如下所示 (Farbe = color):

我已经尝试过以下方法：

CRUD::addColumn([
        'name'     => 'color',
        'label'    => 'Farbe',
        'type'     => 'custom_html',
        'value' => '<svg width="20" height="20">
                        <rect width="20" height="20" style="fill:'. $this->crud->getCurrentEntry()->color . ';" />
                    </svg>',
        'escaped' => false, //optional, if the "value" should be escaped when displayed in the page.
    ]);

但它没有用，很可能是因为 getCurrentEntry 方法在 setupListOperation 中不可用。

然后我用model_function试了一下：

CRUD::addColumn([
        // run a function on the CRUD model and show its return value
        'name'  => 'color',
        'label' => 'Farbe', // Table column heading
        'type'  => 'model_function',
        'function_name' => 'getColorRectangle',
        //'attribute' => 'route' // the method in your Model
        // 'function_parameters' => [$one, $two], // pass one/more parameters to that method
        // 'limit' => 100, // Limit the number of characters shown
    ]);

在模型中使用此功能：

public function getColorRectangle()
{
    return "<svg width='400' height='110'>
                <rect width='300' height='100' style='fill:" . $this->color . ";stroke-width:3;stroke:rgb(0,0,0)'></rect>
            </svg>";
}

但又一次，不幸的是没有成功。

很高兴收到任何建议，也许我在这个主题上苦苦挣扎了几个小时后已经失明了。

干杯

Answer 1

我试过你的第二种方法，它有效，但你需要在你的列中添加 limit，所以你的代码将是这样的：

CRUD::addColumn([
        // run a function on the CRUD model and show its return value
        'name'  => 'color',
        'label' => 'Farbe', // Table column heading
        'type'  => 'model_function',
        'function_name' => 'getColorRectangle',
        'limit' => 2000,
    ]);

问题是你的自定义值没有显示，因为背包列表默认限制。

Answer 2

就我个人而言，我更愿意 create a custom column type。这有很多好处：

更容易调试；
HTML 代码在 Blade 文件中；
您可以在不同的 CrudController 中随时re-use此列类型；

这是 super-easy 要做的。请参阅[此处的文档](create a custom column type)，但在您的特定情况下，它将是这样的：

步骤 1. 创建一个 resources/views/vendor/backpack/crud/columns/color.blade.php 文件。

第 2 步。 在该文件中，copy-paste 您的 HTML 代码，但使用 $entry->{$column['name']} 获取该列的值：

<svg width="20" height="20">
     <rect width="20" height="20" style="fill:'. $entry->{$column['name']} . ';" />
</svg>

步骤 3. 在您的 CrudController 中使用这个新列

CRUD::addColumn([
    'name'     => 'color',
    'label'    => 'Farbe',
    'type'     => 'color',
]);

Laravel 的背包 - 如何显示 color_picker 字段的彩色矩形列？

Backpack for Laravel - how to display colored rectangle column for color_picker field?

laravel

eloquent

color-picker

laravel-backpack