Symfony - 带有 Select2 的实体类型字段
Symfony - Entity Type Field with Select2
我有以下问题。我的 Symony 6 项目中有两个 table:
- 文章
- 变体
这两个 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 选择]实体
我有以下问题。我的 Symony 6 项目中有两个 table:
- 文章
- 变体
这两个 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 选择]实体