3

嗨，我是 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 %}

上面的代码还使用类“rating-input”将收音机组包装在 div 上。

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

$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 的示例图像： 在此处输入图像描述 任何想法如何实现我想要的？提前致谢。

4

3 回答 3

6

好的，这就是我所做的。我使用表单主题来覆盖每个输入的显示方式。为此，您必须添加一个“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 %}

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

于 2013-10-31T18:30:58.710 回答
1

比这一切更容易的是简单地遍历各个单选按钮：

{% for radioRate in form.rate %}
    {{ form_widget(radioRate, {'attr': 'star'}) }}
{% endfor %}
于 2014-08-20T22:45:33.723 回答
0

有几种可能的解决方案：

jQuery

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

这些想法是：

  1. 添加 5 个<span>元素，每个元素包含一颗星
  2. 为每个设置一个从 1 到 5 的值<span>
  3. 当光标悬停 a<span>时，将之前的所有颜色都涂成<span>金色
  4. 单击星号时，获取 的值<span>并更改该<select>值
  5. 离开框时，显示与 的值一样多的星星<select>（没有这个，您可以单击第三颗星，悬停 5 颗星，离开框并且<select>将具有与显示的星星数（5）不同的值（3） ))

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

编辑：具有相同星号的 jsffidle 修改<input type="radio">.

旧解决方案：

样式化每个值

为什么要给你的收音机加一些类<label>？

您可以使用 CSS 为 s 添加一些样式<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 用户界面

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

于 2013-10-28T17:08:07.540 回答