把css放在symfony2中的表单创建中

时间:2016-06-02 11:09:01

标签: php symfony-forms symfony

我有一个问题。所以我有这样的形式:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $aColors = array();
    foreach(Colors::$aNewsColors as $k=>$v){
        $aColors['<div style="background-color:'.$v['textCategoryColor'].'">'.$v['name'].'</div>'] = $k;
    }
    $builder
        ->add('title', TextType::class)
        ->add('image',FileType::class, array('data_class' => null))
        ->add('document',FileType::class, array('data_class' => null))
        ->add('content',TextareaType::class)
        ->add('color_id',ChoiceType::class, array('choices' => $aColors,'choices_as_values' => true))
        ->add('is_top_news',CheckboxType::class)
        ->add('has_gallery',CheckboxType::class)
        ->add('save',SubmitType::class, array('label'=> 'Save'))
    ;
}

问题在于此 color_id ,因为在表单中获取如下所示的选择框:

<option value="1"><div style="background-color:rgb(174,252,202)">Green</div></option>
<option value="2"><div style="background-color:rgb(12,2,43)">Red</div></option>

因此不解释背景颜色。你能帮我吗 ?

2 个答案:

答案 0 :(得分:1)

首先要做的事情。 浏览器不会解释背景颜色,因为它在 <div>内的 <option> 上设置。

话虽如此,我同意其他人的意见,你应该使用javascript库。使用<select>标签赢得的东西看起来不错。

但你的问题需要一个实际的答案,事实证明,即使你使用的是javascript库,我建议的方法也会对你有所帮助。

要真正回答您的问题,请使用&#39; choice_attr&#39;

$aColors = array();
$choiceAttr = array();
foreach(Colors::$aNewsColors as $k=>$v){
    $aColors[$v['name']]=$k;
    $choiceAttr[$v['name']]=array(
        'style'=>'background-color: ' . $v['textCategoryColor'].  ';',
    );
}
$builder
    ->add('title', TextType::class)
    ->add('image',FileType::class, array('data_class' => null))
    ->add('document',FileType::class, array('data_class' => null))
    ->add('content',TextareaType::class)
    ->add('color_id',ChoiceType::class, array(
        'choices' => $aColors,
        'choices_as_values' => true,
        'choice_attr'=>$choiceAttr,
    ))
    ->add('is_top_news',CheckboxType::class)
    ->add('has_gallery',CheckboxType::class)
    ->add('save',SubmitType::class, array('label'=> 'Save'))
;

这应输出

<option value="1" style="background-color:rgb(174,252,202);">Green</option>
<option value="2" style="background-color:rgb(12,2,43);">Red</option>

如果您决定使用javascript库,则不限于设置&#34;样式&#34;在&#39; choice_attr&#39;。 除了#34;风格&#34;属性,你可以使用&#39; choice_attr&#39;设置&#34;类&#34;属性或您可以提出的任何属性(例如&#34;数据颜色值&#34;)。

答案 1 :(得分:0)

您需要使用js。

我认为你可以循环div并给出一个带有必要信息的数据颜色属性(id,color ...)并检索js side

当您单击选择时,您恢复了该值(即id),然后您将查找数据属性的所有div元素并找到该ID。

在视图example.html.twig

{% for color in textCategoryColors %}
   <div data-color="{color | json_encode}"></div>
{% endfor %}