0

我在我的项目中使用 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 中，CSS 样式和 JS 行为默认由 EasyAdmin 提供。

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

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

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

提前致谢。

4

1 回答 1

0

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

将类添加到您的 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 以增加关联字段的宽度。

于 2021-11-15T16:28:53.647 回答