Sonata自动完成中如何自定义显示数据
How customize display data in Sonata autocomplete
我使用表单字段 sonata_type_model_autocomplete 并且我想要自定义显示。我想要自动完成,如图所示:
我是否理解正确,唯一的方法是覆盖模板 SonataAdminBundle:[=32= 中的块 sonata_type_model_autocomplete_selection_format ]:sonata_type_model_autocomplete.html.twig?如何在 documentation。
接下来,我必须创建一个自定义控制器,它将为我提供必要的数据并填写 route 选项。也许像 this.
没有简单现成的解决方案吗?
我找到了解决办法。
可以使用选项to_string_callback,因此不提供单个记录字段,并呈现模板。
class DemoAdmin extends Admin
{
protected function configureFormFields(FormMapper $formMapper)
{
$templating = $this->templating;
$formMapper
->add('movie', 'sonata_type_model_autocomplete', [
'property' => 'title',
'label' => 'Movie',
'multiple' => false,
'required' => false,
'container_css_class' => 'select2-image',
'to_string_callback' => function($entity, $property) use ($templating) {
return $templating->render(
'AcmeDemoBundle:Form/Type/sonata_type_model_autocomplete:movie.html.twig',
['entity' => $entity]
);
},
]);
}
}
模板代码:
{% spaceless %}
<div class="select2-image__autocomplete">
<img
src="{{ entity.webPath | apply_filter('autocomplete') }}"
class="select2-image__image"
alt="{{ entity.title }}"
/>
<strong>{{ entity.title }}</strong>
<div>{{ entity.announce }}</div>
</div>
{% endspaceless %}
config.yml
avalanche_imagine:
filters:
autocomplete:
type: thumbnail
options: { size: [60, 60], mode: outbound }
SCSS
.select2-image {
height: auto;
.select2-choice {
height: 72px; // height 60 + 12 padding
}
&__autocomplete {
clear: both;
height: 60px;
}
&__image {
float: left;
margin-right: 5px;
width: 60px;
height: 60px;
}
}
结果
我使用表单字段 sonata_type_model_autocomplete 并且我想要自定义显示。我想要自动完成,如图所示:
我是否理解正确,唯一的方法是覆盖模板 SonataAdminBundle:[=32= 中的块 sonata_type_model_autocomplete_selection_format ]:sonata_type_model_autocomplete.html.twig?如何在 documentation。 接下来,我必须创建一个自定义控制器,它将为我提供必要的数据并填写 route 选项。也许像 this.
没有简单现成的解决方案吗?
我找到了解决办法。
可以使用选项to_string_callback,因此不提供单个记录字段,并呈现模板。
class DemoAdmin extends Admin
{
protected function configureFormFields(FormMapper $formMapper)
{
$templating = $this->templating;
$formMapper
->add('movie', 'sonata_type_model_autocomplete', [
'property' => 'title',
'label' => 'Movie',
'multiple' => false,
'required' => false,
'container_css_class' => 'select2-image',
'to_string_callback' => function($entity, $property) use ($templating) {
return $templating->render(
'AcmeDemoBundle:Form/Type/sonata_type_model_autocomplete:movie.html.twig',
['entity' => $entity]
);
},
]);
}
}
模板代码:
{% spaceless %}
<div class="select2-image__autocomplete">
<img
src="{{ entity.webPath | apply_filter('autocomplete') }}"
class="select2-image__image"
alt="{{ entity.title }}"
/>
<strong>{{ entity.title }}</strong>
<div>{{ entity.announce }}</div>
</div>
{% endspaceless %}
config.yml
avalanche_imagine:
filters:
autocomplete:
type: thumbnail
options: { size: [60, 60], mode: outbound }
SCSS
.select2-image {
height: auto;
.select2-choice {
height: 72px; // height 60 + 12 padding
}
&__autocomplete {
clear: both;
height: 60px;
}
&__image {
float: left;
margin-right: 5px;
width: 60px;
height: 60px;
}
}
结果