2

我将向您展示如何集成Select2到 Symfony3 项目中！

首先，将这 3 个链接添加到base.html.twig页面。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<link href ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

二、CompanyType.php补充：

 use Symfony\Bridge\Doctrine\Form\Type\EntityType;

 class CompanyType extends AbstractType  {
     /**
      * @param FormBuilderInterface $builder
      * @param array $options
      */
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
  $builder
        ->add('country',EntityType::class, array(
                 'attr'=>array('class'=>"country",),
                 'label'=>'Country of The Head fice',                     

                  'choices_as_values' => true, //               
                 'class' => 'QSCORBundle\Entity\CountryMaps',
                 'choice_label' => 'Country_Name',
 
             ))

    ->add(...)  
}
  ...
 }

之后，在你的实体文件上Country.php添加：

public function __toString()
    {
        // TODO: Implement __toString() method.

       return $this->getCountryName();
    }

最后，在你的模板文件中xxx.html.twig写下：

<script type="text/javascript">
                $(document).ready(function() {
                        $(".country").select2();
                });
</script>
{{ form_widget(form.country)}}

这是它的外观图像：

在此处输入图像描述

4

1 回答 1

1

您也可以通过向表单构建器元素添加数据属性然后将全局 JavaScript 文件包含到您的站点来处理 select2 来执行此操作，无需将其添加到每个 twig 文件中。

例如;

$builder
    ->add('country', 'entity', [
        'class' => 'EntityType::class',
        'label'=>'Country of The Head fice',
        'choices_as_values' => true, //               
        'class' => 'QSCORBundle\Entity\CountryMaps',
        'choice_label' => 'Country_Name',
        'attr' => ['data-select' => 'true']
]);

然后在站点范围的 js 文件中添加；

$('select[data-select="true"]').select2();

这样，任何具有 data 属性的选择都data-select="true"将应用 select2 。

于 2016-05-06T12:01:51.137 回答