如何在Symfony 3中集成Select2 JS

时间:2016-05-06 11:38:09

标签: php jquery-select2 symfony

您好我将向您展示我在Project Symfony3中集成Select2的方法

首先 => 我将此链接添加到我的页面“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>

Seconde =&gt;在我的CompanyType.php中为例子 和 Alson添加

 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(...)  
}
  ...
 }

3 =&GT;在您的文件Entity Country.php中添加此

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

       return $this->getCountryName();
    }

最后 =&GT;在您的文件xxx.html.twig

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

        </script>



{{ form_widget(form.country)}}

enter image description here

1 个答案:

答案 0 :(得分: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-select="true"的select都会将select2应用于它。