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

Question

您好我是Symfony的新手，我遇到以下问题：

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

问题是symfony将类添加到空洞无线电组而不是每个输入。

我搜索了一个解决方案，我找到的最接近的提示是：

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child, {'attr': {'class': 'rating-input'}}) }}
        {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

上面的代码还将无线电组包装在一个div上，类为“rating-input”。

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

$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示例图片： 任何想法我怎么能实现我想要的？ 提前致谢。

Answer 1

好的，这就是我的所作所为。 我使用表单主题来覆盖每个输入的显示方式。 要做到这一点，你必须添加一个“form_theme form self”标签，并覆盖要在其中呈现表单的树枝中的choice_widget块。

{% extends ::base.html.twig %}

{% form_theme form _self %}

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

无论如何，谢谢你的答案。

Answer 2

比简单地循环单个单选按钮更容易：

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

Answer 3

有几种可能的解决方案：

的jQuery

见fiddle example。将鼠标指针移动到星星上，然后单击最后一颗星。

这些想法是：

1. 添加包含每个星标的5个<span>元素
2. 为每个<span>
设置1到5的值
3. 当光标悬停<span>时，为黄金中的所有先前<span>着色
4. 点击星标时，获取<span>的值并更改<select>值
5. 当离开方框时，显示与<select>的值一样多的星星（没有这个，你可以点击第三颗星，悬停5颗星，离开方框，<select>将有一个不同的值（3）比显示的星数（5））

您可以隐藏<select>元素。事实上，改变输入类型（无线电，选择，数字字段等）不应该是一个问题。

修改：jsffidle with same stars modifying values of <input type="radio">。

旧解决方案：

为每个值设置样式

为什么要在收音机中添加一些课程<label>？

您可以使用CSS为<label>添加一些样式，例如：

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颗星：

->add('rate', 'choice', array(
    'choices' => array(
        1 => '*',
        2 => '**',
        3 => '***',
        4 => '****',
        5 => '*****'
    ),
    'expanded' => true,
    'multiple' => false
))

分数会显示*到*****。请参阅jsfiddle上的此示例。

jQuery UI

按钮小部件可用于display a nice choice widget。请参阅jsfiddle上的此示例。