Symfony3.3/PHP7：如何在Sonata Admin中用自定义JS扩展模态窗口模板

嘿，我之前也在Symfony3.3+Sonata Admin的环境下折腾过这个需求，给你分享下具体的实现步骤，亲测有效：

1. 编写自定义JavaScript逻辑 #

首先创建你的自定义JS文件，比如放在app/Resources/public/js/sonata-modal-custom.js，这里可以写针对模态窗口的任意逻辑，比如字段事件绑定、表单验证、样式调整等：

// 监听Sonata模态窗口加载完成的事件（推荐用这个事件，避免DOM未加载完成的问题）
jQuery(document).on('sonata-admin-modal-post-show', function(event) {
    const $modal = jQuery(event.target);
    
    // 示例：给Product实体的选择框绑定change事件
    $modal.find('#product_condition_product').on('change', function() {
        console.log('选中的产品ID:', $(this).val());
        // 这里可以加你的自定义逻辑，比如动态加载关联数据
    });

    // 示例：修改模态窗口标题样式
    $modal.find('.modal-title').css('color', '#2c3e50');
});

2. 扩展Sonata的模态窗口模板 #

Sonata Admin默认使用@SonataAdmin/CRUD/edit_modal.html.twig作为模态窗口的模板，我们可以通过模板继承来引入自定义JS：

方式一：全局所有模态窗口生效 #

在app/Resources/SonataAdminBundle/views/CRUD/edit_modal.html.twig创建自定义模板：

{% extends '@SonataAdmin/CRUD/edit_modal.html.twig' %}

{% block javascripts %}
    {{ parent() }} {# 保留Sonata原有的JS资源 #}
    <script src="{{ asset('js/sonata-modal-custom.js') }}"></script>
{% endblock %}

这样所有Sonata Admin的模态窗口都会加载你的自定义JS。

方式二：仅针对特定Admin（比如ProductConditionAdmin）生效 #

如果你只想让某个Admin的模态窗口加载自定义JS，在对应的Admin类里重写getEditTemplate方法：

// src/AppBundle/Admin/ProductConditionAdmin.php
namespace AppBundle\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;

class ProductConditionAdmin extends AbstractAdmin
{
    // ... 你的原有配置（比如configureFormFields）

    public function getEditTemplate()
    {
        // 判断当前请求是否是模态窗口的AJAX请求
        if ($this->getRequest()->isXmlHttpRequest()) {
            return 'AppBundle:Admin:product_condition_edit_modal.html.twig';
        }
        return parent::getEditTemplate();
    }
}

然后创建对应的模板文件app/Resources/AppBundle/views/Admin/product_condition_edit_modal.html.twig：

{% extends '@SonataAdmin/CRUD/edit_modal.html.twig' %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/sonata-modal-custom.js') }}"></script>
{% endblock %}

3. 确保JS文件可访问 #

最后，把你的JS文件复制到web目录（或者用Assetic编译）：

# 如果用Assetic的话，执行编译命令
php bin/console assetic:dump

# 如果是直接复制文件
cp app/Resources/public/js/sonata-modal-custom.js web/js/

额外提示：Sonata模态窗口的常用事件 #

Sonata提供了几个自定义事件，方便你在合适的时机触发逻辑：

• sonata-admin-modal-post-show：模态窗口完全显示后触发
• sonata-admin-modal-pre-hide：模态窗口开始隐藏前触发
• sonata-admin-modal-post-hide：模态窗口完全隐藏后触发

用这些事件比直接绑定DOM事件更可靠，因为模态窗口是动态生成的。

内容的提问来源于stack exchange，提问作者Anton