EasyAdmin 3 关联字段 Select2 样式与行为定制指南

<?php

namespace App\Controller\Admin;

use App\Entity\Guide;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;

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

    public function configureFields(string $pageName): iterable
    {
        $field = AssociationField::new('thematiques', 'Thématiques');

        // 在非详情页时，添加自定义 CSS 类
        if (Crud::PAGE_DETAIL !== $pageName) {
            $field->addCssClass('custom-select2-width');
        }

        return [
            // ... 其他字段
            $field
        ];
    }
    // ... 其他方法
}

/* 例如，在 public/css/admin.css 或通过 Webpack Encore 引入的 CSS 文件中 */
.custom-select2-width .select2-container {
    width: 100% !important; /* 使 Select2 容器宽度自适应父容器 */
    max-width: 400px;      /* 或者设置一个固定的最大宽度 */
}

/* 如果需要更精细的控制，可以针对 EasyAdmin 的特定结构 */
.field-association.custom-select2-width .select2-container--default .select2-selection--multiple {
    min-height: 38px; /* 调整多选框的最小高度 */
}

<?php

namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
// ...

class GuideCrudController extends AbstractCrudController
{
    // ...
    public function configureFields(string $pageName): iterable
    {
        $field = AssociationField::new('thematiques', 'Thématiques');

        if (Crud::PAGE_DETAIL !== $pageName) {
            $field
                ->addCssFiles(['/css/custom-select2.css']) // 引入自定义 CSS
                ->addJsFiles(['/js/custom-select2-behavior.js']); // 引入自定义 JS
        }

        return [
            // ... 其他字段
            $field
        ];
    }
    // ...
}

<?php

namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
// ...

class GuideCrudController extends AbstractCrudController
{
    // ...
    public function configureFields(string $pageName): iterable
    {
        $field = AssociationField::new('thematiques', 'Thématiques');

        if (Crud::PAGE_DETAIL !== $pageName) {
            $field->addWebpackEncoreEntries(['custom-select-entry']); // 关联 Webpack Encore 入口
        }

        return [
            // ... 其他字段
            $field
        ];
    }
    // ...
}

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

if (!Encore.is
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js') // 您的主应用入口
    .addEntry('custom-select-entry', './assets/js/custom-select2.js') // 定义新的自定义 Select2 入口
    // ... 其他配置
;

module.exports = Encore.getWebpackConfig();

// assets/js/custom-select2.js
import '../css/custom-select2.css'; // 可以在 JS 入口中导入 CSS

// 确保 jQuery 和 Select2 已经加载
$(function() {
    // 找到所有具有特定类（例如由 addCssClass 添加的类）的多选关联字段
    // 或者更通用地，找到所有 EasyAdmin 的多选 Select2 实例
    // 注意：这里的选择器可能需要根据实际渲染的 HTML 结构进行调整
    $('.field-association.field-association-thematiques select[multiple]').each(function() {
        const $select = $(this);

        // 检查 Select2 是否已经初始化
        if ($select.data('select2')) {
            // 如果已经初始化，尝试获取并修改配置
            // 简单粗暴的方式是销毁后重新初始化
            $select.select2('destroy');
        }

        // 重新初始化 Select2，并设置 closeOnSelect 为 false
        $select.select2({
            // 您可以在这里添加 EasyAdmin 默认 Select2 的其他配置，以避免覆盖
            // 例如：placeholder, allowClear, tags 等
            closeOnSelect: false, // 关键配置：保持下拉框开启
            // 如果 EasyAdmin 默认 Select2 提供了 AJAX 加载，您可能需要在这里重新配置
            // 例如：
            // ajax: {
            //     url: '/your-ajax-url',
            //     dataType: 'json',
            //     delay: 250,
            //     // ... 其他 AJAX 配置
            // }
        });
    });
});

<?php

namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Config