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

Question

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

以下是CRUD控制器的示例：

<?php
namespace AppControllerAdmin;
use AppEntityGuide;
use EasyCorpBundleEasyAdminBundleControllerAbstractCrudController;
use EasyCorpBundleEasyAdminBundleFieldTextField;
use EasyCorpBundleEasyAdminBundleFieldIdField;
use EasyCorpBundleEasyAdminBundleFieldAssociationField;
use EasyCorpBundleEasyAdminBundleFieldDateTimeField;
use EasyCorpBundleEasyAdminBundleFieldTextEditorField;
use EasyCorpBundleEasyAdminBundleFieldImageField;
use EasyCorpBundleEasyAdminBundleFieldArrayField;
use EasyCorpBundleEasyAdminBundleConfigAction;
use EasyCorpBundleEasyAdminBundleConfigActions;
use EasyCorpBundleEasyAdminBundleConfigCrud;
use VichUploaderBundleFormTypeVichImageType;
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中，CSS样式和JS行为默认由EasyAdmin提供。

然而，我想修改CSS来更改这个表单小部件select下拉列表的宽度，并使其更大。

我还想修改JS，默认情况下，每次我们选择一个项目时都会关闭下拉列表；因为我希望允许下拉列表保持打开状态，并进行多项选择，以允许用户在下拉列表中选择多个项目，而无需每次单击一个项目时关闭选择菜单。我看到我们可以用event.stopPropagation((和event.prventDefault((来实现这一点；但我不知道如何将自定义JS应用于EasyAdmin特定表单小部件。

有人知道如何在EasyAdmin3中自定义多关联字段select2下拉列表的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，以增加关联字段的宽度。