关于Symfony 2:Symfony 2-如何编辑单选按钮组

 2021-04-26 

Symfony 2 - How to edit radio button group

嗨,我是Symfony的新手,并且遇到以下问题:

我正在实施费率表,因此我添加了一个单选按钮组,因此请选择1到5之间的一个值。
这个想法是要显示五颗星而不是经典的单选按钮,所以我需要添加一个类
每个输入字段。

问题在于,symfony将类添加到Hole无线电组中,而不是将其添加到每个输入中。

我搜索了一个解决方案,发现的最接近的提示是:

1
2
3
4
5
6
7
8
9
{% block choice_widget_expanded %}
{% spaceless %}
   
        {% for child in form %}
            {{ form_widget(child, {'attr': {'class': 'rating-input'}}) }}
        {% endfor %}
   
{% endspaceless %}
{% endblock choice_widget_expanded %}

上面的代码还将无线电组包裹在具有'rating-input \\'类的div上。

这是控制器中的测试表单代码:

1
2
3
4
$form->createFormBuilder()
     ->add('rate', 'choice', array(1 => 1, 2 => 2, 3 => 3, 4 => 4, 5 => 5), 'expanded' => true, 'multiple' => false))
     ->add('save', 'submit')
     ->getForm();

这是我得到的html的示例图像:
enter

好,这就是我所做的。
我使用表单主题重写了每个输入的显示方式。
为此,您必须添加" form_theme form self"标签,并在要渲染表单的树枝中覆盖choice_widget块。

1
2
3
4
5
6
7
8
9
10
11
12
{% extends ::base.html.twig %}

{% form_theme form _self %}

{% block choice_widget_expanded %}
   
        {% for child in form %}
            {{ form_widget(child, {'attr': 'star'}) }}
            {{ form_label(child) }}
        {% endfor %}
   
{% endblock %}

仍然感谢您的回答。


比通过所有单选按钮简单地循环浏览要容易得多:

1
2
3
{% for radioRate in form.rate %}
    {{ form_widget(radioRate, {'attr': 'star'}) }}
{% endfor %}

有几种可能的解决方案:

jQuery的

请参阅此小提琴示例。将鼠标指针移到星星上,然后单击最后一个星星。

想法是:

  • 添加5个<span>元素,每个元素包含一颗星星
  • 为每个<span>设置一个从1到5的值
  • 当光标悬停在<span>上时,将所有先前的<span>涂成金色
  • 单击星号时,获取<span>的值并更改<select>的值
  • 离开方框时,显示与<select>值一样多的星星(如果没有,您可以单击第三颗星星,将其悬停5颗星星,离开方框,并且<select>的值将不同于(x5)的值(3)。显示的星数(5))
  • 您可以隐藏<select>元素。实际上,更改输入的类型(单选,选择,数字字段等)应该不是问题。

    编辑:具有相同星号的jsffidle会修改<input type="radio">的值。

    旧的解决方案:

    设置每个值的样式

    为什么要向收音机<label>添加一些类?

    您可以使用CSS向<label>添加一些样式,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    label[for=tag_rate_0] {
        color:Green;
    }
    label[for=tag_rate_1] {
        color:Red;
    }
    label[for=tag_rate_2] {
        color:Blue;
    }
    label[for=tag_rate_3] {
        color:Orange;
    }
    label[for=tag_rate_4] {
        color:Purple;
    }

    请参阅jsfiddle上的示例。 label[for=tag_rate_0]对应于1得分,这是由于Symfony2计数字段的方式。

    显示星星

    您还可以通过修改表单来显示1到5星:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ->add('rate', 'choice', array(
        'choices' => array(
            1 => '*',
            2 => '**',
            3 => '***',
            4 => '****',
            5 => '*****'
        ),
        'expanded' => true,
        'multiple' => false
    ))

    它将显示分数的******。请参阅jsfiddle上的示例。

    jQuery UI

    按钮小部件可用于显示一个不错的选择小部件。请参阅jsfiddle上的示例。