如何在 Sonata Admin（Symfony 3.3、PHP 7）中使用自定义 javascript 为模态窗口扩展模板？

Posted 2023-02-16

【中文标题】如何在 Sonata Admin（Symfony 3.3、PHP 7）中使用自定义 javascript 为模态窗口扩展模板？

【英文标题】：How can I extend template with custom javascript for modal window in the Sonata Admin (Symfony 3.3, PHP 7)?

【发布时间】：2018-10-12 04:43:00

【问题描述】：

我有一个实体结构：

Deal -->       DealCondition <-- Product
id             id                id
dealConditons  product           name   

我有管理部分：

交易管理员：

protected function configureFormFields(FormMapper $formMapper)

    $formMapper->add('dealConditions', 
        'sonata_type_collection',
        [
            'by_reference' => false,
            'required' => false,
        ],
        [
            'edit'     => 'inline',
            'inline'   => 'table',
            'sortable' => 'position',
        ]);
...

产品条件管理员：

protected function configureFormFields(FormMapper $formMapper)

    $formMapper->add('product','sonata_type_model');

产品管理员：

protected function configureFormFields(FormMapper $formMapper)

    $formMapper->add('name', null);

在 ProductAdmin 页面上，我需要一些 javascript 来实现我的目的，所以我这样做了：

    application.admin.product:
    class: ...\ProductAdmin
    tags:
      -  name: sonata.admin, manager_type: orm, label_translator_strategy: "sonata.admin.label.strategy.underscore"
    arguments:
      - ~
      - ...\Product
      - ~
    calls:
      - [setTemplates, [
        edit: ApplicationDealBundle:ProductAdmin:edit.html.twig]]

在edit.html.twig中：

% block javascripts %
     parent() <script type="text/javascript">MyScript();</script>
% endblock %

当我打开 ProductAdmin 作为主页时一切正常，但是当我单击嵌套表单 DealConditions 上产品字段旁边的“添加新产品”按钮时，脚本不存在。 How it looks

如何添加脚本？ 谢谢。

【参考方案1】：

你现在可能已经解决了这个问题，但我昨天也遇到了同样的问题，所以如果其他人来这里，我会写下我是怎么做的。

可能有更好/更优雅的解决方案，但这目前还可以。我所做的是覆盖edit_many_script.html.twig 的基础manages the many-to-[one|many] association field popup

从vendor 复制粘贴文件并将其放入您的app/Resources/SonataAdminBundle/views/CRUD/Association 目录中（或创建它）。

您会在文件中找到此 ajax 调用来检索您的实体的管理表单：

// retrieve the form element from the related admin generator
jQuery.ajax(
    url: a.attr('href'),
    dataType: 'html',
    success: function(html) 
         Admin.log('[ id |field_dialog_form_edit] ajax success', field_dialog_ id );
         // populate the popup container
         field_dialog_content_ id .html(html);
         field_dialog_title_ id .html(" associationadmin.label|trans(, associationadmin.translationdomain) ");

         Admin.shared_setup(field_dialog_ id );

         // capture the submit event to make an ajax call, ie : POST data to the
         // related create admin
         jQuery(document).on('click','#field_dialog_ id  a', field_dialog_form_action_ id );
         jQuery('form', field_dialog_ id ).on('submit', field_dialog_form_action_ id );

         // open the dialog in modal mode
         field_dialog_ id .modal();

         Admin.setup_list_modal(field_dialog_ id );
    
);

您可以在那里添加您的脚本。请注意，默认情况下，它将用于每个多对 X 关系，因此如果您希望仅在特定情况下加载脚本，您可以测试 associationadmin.label|trans(, associationadmin.translationdomain) ，如下所示：

// retrieve the form element from the related admin generator
jQuery.ajax(
    url: a.attr('href'),
    dataType: 'html',
    success: function(html) 
         Admin.log('[ id |field_dialog_form_edit] ajax success', field_dialog_ id );
         // populate the popup container
         field_dialog_content_ id .html(html);
         field_dialog_title_ id .html(" associationadmin.label|trans(, associationadmin.translationdomain) ");

         Admin.shared_setup(field_dialog_ id );

         // capture the submit event to make an ajax call, ie : POST data to the
         // related create admin
         jQuery(document).on('click','#field_dialog_ id  a', field_dialog_form_action_ id );
         jQuery('form', field_dialog_ id ).on('submit', field_dialog_form_action_ id );

         // Custom JS for PopUpWidget Entity
         if(" associationadmin.label|trans(, associationadmin.translationdomain) " === "PopUpWidget")
             //your script
         

         // open the dialog in modal mode
         field_dialog_ id .modal();

         Admin.setup_list_modal(field_dialog_ id );
    
);