Symfony - 带有 Select2 的实体类型字段

Symfony - Entity Type Field with Select2

我有以下问题。我的 Symony 6 项目中有两个 table:

  1. 文章
  2. 变体

这两个 table 相互关联,因为一篇文章可以有多个变体,而一个变体始终属于一篇文章。

现在我有一个创建新变体的表单,我必须在其中 select 相应的文章。为此,我想使用 EntityType 字段作为下拉列表。

问题是我在文章 table 中有多达 100,000 篇文章,这导致一次加载所有选项时会出现巨大的加载问题。因此,我想到了使用Select2,只在输入1-2个字符后才进行查询,并且下拉列表中只显示符合搜索条件的文章。

JS:

    $(#sizes).select2({
        ajax: {
            url: {{ path("text_ajax_load_select_option") }},
            dataType: 'json',
            type: 'GET',
            data: function (params) {
    
                var queryParameters = {
                    term: params.term,
                }
                return queryParameters;
            },                
            processResults: function (data) {
                return {
                    results: $.map(data.selectOptions, function (selectOptions) {
                        return {
                            text: selectOptions.title,
                            id: selectOptions.title
                        }
                    })
                };
            }
        }
    }) 

带有 EntityType 下拉列表的新表单 (VariantenType) 根据 select2 字段中的搜索输入动态填充:

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {

        $builder
           // .. other         
            ->add('base_article', EntityType::class, [
                'class' => Artikel::class,
                'multiple' => false,
                'choice_label' => 'title', 
                'label' => 'Base Article',
                'choices' => [],
            ])         
        ;
    }
    

我很乐意接受任何想法和建议。

您只需要向您的 FormBuilder 添加一个 PRE_SUBMIT 事件侦听器:

public function buildForm(FormBuilderInterface $builder, array $options): void
{
      $builder
        // ... other properties         
        ->add('base_article', EntityType::class, [
            'class' => Artikel::class,
            'choice_label' => 'title', 
            'label' => 'Base Article',
            'choices' => [],
            'attr' => [
                'class' => 'select2article'
            ]  
        ]); 

       $builder->addEventListener(
            FormEvents::PRE_SUBMIT,
            function (FormEvent $event) {
                $data = $event->getData();
                $form = $event->getForm();
                if(isset($data['base_article']) and $data['base_article']!=null){
                    $selected = $data['base_article'];
                    $form->add('base_article', EntityType::class, array(
                        'class' => Artikel::class,
                        'choice_label' => 'title',
                        'label' => 'Base Article',
                        'attr' => [
                           'class' => 'select2article'
                        ],
                        'query_builder' => function (EntityRepository $er) use  ($selected){
                            return $er->createQueryBuilder('a')
                                ->where('a.id = :id')
                                ->setParameter('id', $selected);
                        },
                    ));
                }  
            }
        );
}

JS

  $('.select2article').select2({
        ajax: {
            url: {{ path("text_ajax_load_select_option") }},
            dataType: 'json',
            type: 'GET',
            data: function (params) { 
                var queryParameters = {
                    term: params.term,
                }
                return queryParameters;
            },                
            processResults: function (data) {
                return {
                    results: $.map(data.selectOptions, function (selectOptions) {
                        return {
                            text: selectOptions.title,
                            id: selectOptions.id
                        }
                    })
                };
            }
        }
    })

因此在发送请求后,我们进入事件侦听器。在那里我们将获得 base_article 属性 的选定 id,之后我们将 query_builder 参数添加到表单中,并通过 [=16= 中的 id 选择]实体