EasyAdmin 3:在AssociationField中自定义select2下拉CSS和JS

Question

我在我的项目中使用Symfony 5和EasyAdmin 3。

下面是CRUD控制器的一个例子：

<?php

namespace App\Controller\Admin;

use App\Entity\Guide;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;

use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
use EasyCorp\Bundle\EasyAdminBundle\Field\IdField;
use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Field\DateTimeField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextEditorField;
use EasyCorp\Bundle\EasyAdminBundle\Field\ImageField;
use EasyCorp\Bundle\EasyAdminBundle\Field\ArrayField;

use EasyCorp\Bundle\EasyAdminBundle\Config\Action;
use EasyCorp\Bundle\EasyAdminBundle\Config\Actions;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;

use Vich\UploaderBundle\Form\Type\VichImageType;

class GuideCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return Guide::class;
    }

    public function configureFields(string $pageName): iterable
    {
        if (Crud::PAGE_DETAIL === $pageName) {
            $field = ArrayField::new('thematiques', 'Thématiques');
        } else {
            $field = AssociationField::new('thematiques', 'Thématiques');
        }

        return [
            IdField::new('id')->hideOnForm(),
            TextField::new('title', 'Titre'),
            TextEditorField::new('description', 'Description'),
            TextField::new('site_url', 'Url du Site'),
            TextField::new('site_url_button_text', 'Texte du Button'),
            TextField::new('slug', 'Slug')->hideOnIndex()->hideOnForm(),
            ImageField::new('image_url', 'Image')
                ->setBasePath('images/guides')
                ->setUploadDir('public/images/guides')
                ->setRequired(false),
            DateTimeField::new('created_at', 'Date Création')->onlyOnIndex(),
            DateTimeField::new('updated_at', 'Date Modification')->onlyOnIndex(),
            $field
        ];
    }

    public function configureActions(Actions $actions): Actions
    {
        return $actions
            ->add(Crud::PAGE_INDEX, Action::DETAIL)
            ->add(Crud::PAGE_EDIT, Action::INDEX)
            ->add(Crud::PAGE_NEW, Action::INDEX);
    }
}

在AssociationField中，EasyAdmin默认提供CSS样式和JS行为。

但是，我想修改CSS以更改此表单小部件的宽度，选择下拉列表并使其更大。

我还想在默认情况下修改JS，在每次选择项目时关闭下拉列表；因为我希望允许下拉列表保持打开状态，并进行多次选择，这样用户就可以在下拉列表中选择多个项，而无需每次单击一个项目时关闭select菜单。我看到我们可以使用event.stopPropagation()和event.preventDefault()来完成这个任务；但是我不知道如何将定制的JS应用到EasyAdmin特定的表单小部件中。

有谁知道如何在select2 3中自定义多个关联字段EasyAdmin下拉列表的CSS和JS？

提前谢谢。

Answer 1

可以使用多个方法自定义您的字段，例如：

向div (addCssClass)添加类

$field = AssociationField::new('thematiques', 'Thématiques')
    ->addCssClass('css-class');

你的选择会变成

<div class="field-association css-class form-group">

添加css或js文件

$field = AssociationField::new('thematiques', 'Thématiques')
    ->addCssFiles(['file.css'])
    ->addJsFiles(['file.js']);

添加webpack条目：

$field = AssociationField::new('thematiques', 'Thématiques')
    ->addWebpackEncoreEntries(['custom-select']);

如果使用addWebpackEncoreEntries，则必须将条目添加到webpack.config.js中，并使用该条目实现自定义的javascript和或css。

增加输入的大小：

您还可以使用->setColumns('col-12')来增加输入的宽度。例如：

$field = AssociationField::new('thematiques', 'Thématiques')
    ->setColumns('col-12');

您可以很容易地使用这些类添加自定义css或javascript来增加关联字段的宽度。