如何在 Symfony 中将 choiceType 值显示为颜色

Question

我想在数据库中保存一个整数值并将其显示为一种颜色，但我找不到正确的方法。

我的表格如下所示：

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder->add('risk', ChoiceType::class, [
        'choices' => 
            'level.0' => 1,
            'level.1' => 2,
            'level.2' => 3,
            'level.3' => 4,
            'level.4' => 5
        ],
    ]);
}

最后应该是这个表格：

Answer 1

您可以使用 choice_attr 为这些选项添加特定的 CSS class，并在您的 CSS 中相应的 class 定义来呈现这些选项如你所愿：

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder->add('risk', ChoiceType::class, [
        'choices' => 
            'level.0' => 1,
            'level.1' => 2,
            'level.2' => 3,
            'level.3' => 4,
            'level.4' => 5
        ],
        'choice_attr' => function($choice, $key, $value) {
           return ['class' => 'level_'.strtolower($key)];
        }
    ]);
}

CSS：（仅以文字颜色为例，其他由您决定）

.level_0 {
    color: red;
}
.level_1 {
    color: orange;
}
.level_2 {
    color: yellow;
}
.level_3 {
    color: light_green;
}
.level_4 {
    color: green;
}

Answer 2

首先感谢 Veve，但他的回答非常简短且未完成，我必须通过添加 expanded => true 和 multiple => false 将选择类型转换为单选按钮。有关详细信息，请参阅：Symfony Select Tag

$builder->add('risk', ChoiceType::class, [
     'choices' => [
        'level-0' => 1,
        'level-1' => 2,
        'level-2' => 3,
        'level-3' => 4,
        'level-4' => 5
     ],
        'choice_attr' => function($choice, $key, $value) {
             return ['class' => 'risk_'.strtolower($key)];
         },
     'expanded' => true,
     'multiple' => false,
     'placeholder' => false
]);

然后我使用 table 来显示表单中的值。

<table class="table risk-colors-table">
    <tr>
        <td class="risk_level-text">Text</td>
        <td class="risk-option level-0">{{ form_row(form.risk[0])}}</td>
        <td class="risk-option level-1">{{ form_row(form.risk[1])}}</td>
        <td class="risk-option level-2">{{ form_row(form.risk[2])}}</td>
        <td class="risk-option level-3">{{ form_row(form.risk[3])}}</td>
        <td class="risk-option level-4">{{ form_row(form.risk[4])}}</td>
    </tr>
</table>

我添加了这个 css 以使用我之前添加的类进行漂亮的设计并隐藏单选按钮和标签：

.risk_level-text {
   vertical-align: center!important;
}

.level-0 {
    background: #63d06c;
}

.level-1 {
    background: #a7e35c;
}

.level-2 {
    background: #fdf74d;
}

.level-3 {
    background: #f0a725;
}

.level-4 {
    background: #ee0018;
}

.risk-colors-table {
    width: 100%;
    padding-left: 2px;
}

.risk-colors-table tr {
    border:2px solid #d9d9d9;
}

.risk-option {
    float: right;
    vertical-align: center!important;
    border-radius: 25px;
    margin-bottom: 25px;
    height: 28px;
    width:19%;
}

.risk-option label {
    visibility: hidden;
    text-align: center;
    color:white;
    vertical-align:middle;
}

.risk-option.active {
    border:3px solid #3362b1;
}

.risk-colors-table td {
    margin: 10px 1px;
}

在 JavaScript 中，我必须添加此功能才能在单击 table td:

时激活单选按钮

$(function () {
    $('.risk-option').click(
        function () {
            $(this).addClass('active').siblings().removeClass('active');
            var $radioBtn = $('.risk-option.active input[type="radio"]');

            if ($radioBtn.is(':checked') === true) {
                $radioBtn.filter('input[type="radio"]').prop('checked', true);
            }
        }
    );
});

我为此付出了很多努力，希望它能对某人有所帮助。最后的结果就是我的意思问题中的图片所示。

如何在 Symfony 中将 choiceType 值显示为颜色

How to display choiceType values in Symfony as Colors

css

forms

symfony

bootstrap-4

choicefield