Question

我正在制作允许用户选择img的表单。

Symfony2.8 with sonataMediaBundle /

$form = $this->createFormBuilder($form)
    ->add('media',EntityType::class,array(
            'expanded' => true,
            'class' => "Application\Sonata\MediaBundle\Entity\Media"
            }))
    ->add('save', SubmitType::class, array('label' => 'Create Post'))
    ->getForm();

在树枝上

{{form_widget(form.media)}}

然而，它显示的单选按钮只有img的名称。

○AAA.jpg○BBB.jpg○CCC.jpg○DDD.jpg（'○'是单选按钮）

这对用户来说不是一个好设计。

我想在这里显示imgs的缩略图。

有没有好方法呢？

Answer 1

我能想象到的最简单的方法是用javascript实际检查单选按钮。

你的控制器：

//src/AppBundle/Controller/YourController.php

public function yourAction()
{
    $em = $this->getDoctrine()->getManager();

    $medias = $em->getRepository('AppBundle:Media')->findAll();

    $entity = new YourEntity();

    $form = $this->createForm(YourEntityType::class, $entity);

    if ($form->isSubmitted() && $form->isValid()) {
        //... your logic
    }

    return $this->render('AppBundle::template.html.twig', array(
        'form' => $form->createView(),
        'medias' => $medias
    ));
}

然后在你的twig文件中

{% for media in medias %}
    <img class="to-select" src="{{ media.pathToThumbnail }}" data-id="{{ media.id }}" />
{% endfor %}

{{ form_start(form) }}
    <!-- assuming you are using bootstrap -->
    <div class="hidden">{{ form_widget(form.media) }}</div>
    {{ form_widget(form.submit) }}
{{ form_end(form) }}

{% block javascripts %}
    <script>
        //assuming you use jquery
        $('.to-select').click(function () {
            var id = '#form_name_media_' + $(this).data('id');
            var media = $(id);

            if (media.is(':checked')) {
                media.prop('checked', false);
            } else {
                media.prop('checked', true);
            }
        });
    </script>
{% endblock javascripts %}

使用Symfony2 formbuilder显示缩略图而不是img的名称

1 个答案: