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的示例图像:
有什么想法可以实现我想要的吗?
提前致谢。
好,这就是我所做的。
我使用表单主题重写了每个输入的显示方式。
为此,您必须添加" 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的
请参阅此小提琴示例。将鼠标指针移到星星上,然后单击最后一个星星。
想法是:
您可以隐藏
编辑:具有相同星号的jsffidle会修改
旧的解决方案:
设置每个值的样式
为什么要向收音机
您可以使用CSS向
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上的示例。
显示星星
您还可以通过修改表单来显示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 )) |
它将显示分数的
jQuery UI
按钮小部件可用于显示一个不错的选择小部件。请参阅jsfiddle上的示例。