如何在 Sonata 管理表单中使用 Ajax？

我有一个具有以下字段和关联的商家实体：-

/**
 * @ORM\ManyToMany(targetEntity="Category", inversedBy="merchants")
 */
public $categories;

/**
 * @ORM\ManyToMany(targetEntity="Tag", inversedBy="merchants")
 */
public $tags;

/**
 * @ORM\ManyToOne(targetEntity="Category", inversedBy="merchants")
 */
protected $primaryCategory;

/**
 * @ORM\ManyToOne(targetEntity="Tag", inversedBy="merchants")
 */
protected $primaryTag;

标签和类别也有一个多对多映射。 所以我们有Tag_Category、Merchant_Tag、Merchant_Category映射表。

现在我想在这些字段上执行一些ajax。

我想允许用户首先选择主标签。在Primary Tag的基础上，ajax将类别刷新为仅属于该Tag的类别以及更多操作。

我怎样才能实现这个目标？

Thanks!

几个月前我就能够完成这项工作。虽然 a.aitboudad 分享的内容是准确的。初次使用 Symfony/Sonata 的人可能会遇到一些问题。

以下是步骤。

1> 扩展Sonata CRUDedit.html.twig / base_edit.html.twig .为简单起见，我将仅使用后者。 复制vendor/bundles/Sonata/AdminBundle/Resources/views/CRUD/base_edit.html.twig进入与 Merchant AdminController 对应的视图文件夹 -YourBundle/Resources/views/Merchant/base_edit.html.twig

2> 我们需要告诉我们的 MerchantAdmin 类使用这个模板。所以我们重写 SonataAdmin 的getEditTemplate像这样的方法：

public function getEditTemplate()
{
    return 'YourBundle:Merchant:base_edit.html.twig';
}

3>接下来我们需要编写 Ajax 功能代码 in our base_edit.html.twig。标准 Ajax 包含以下内容：

3.1>-- 在控制器中为 Ajax 请求创建一个 Action 我们主要想要获取与特定标签对应的类别 ID 列表。但很可能您只是使用 Sonata 的 CRUD 控制器。

定义扩展 CRUDController 的 MerchantAdminController

<?php

namespace GD\AdminBundle\Controller;

use Sonata\AdminBundle\Controller\CRUDController as Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use GD\AdminBundle\Entity\Merchant;

class MerchantAdminController extends Controller
{

}

3.2>-- 通过在中定义它来告诉您的管理服务使用这个新创建的控制器而不是默认的 CRUDControllerYourBundle/Resources/config/services.yml

gd_admin.merchant:
        class: %gd_admin.merchant.class%
        tags:
            - { name: sonata.admin, manager_type: orm, group: gd_merchant, label: Merchants }
        arguments: [null, GD\AdminBundle\Entity\Merchant, GDAdminBundle:MerchantAdmin]

请注意，第三个参数是控制器的名称。默认情况下它将为空。

3.3>-- 创建一个名为getCategoryOptionsFromTagAction在你的控制器中。您的 Ajax 调用将针对此 Action。

// route - get_categories_from_tag
public function getCategoryOptionsFromTagAction($tagId)
    {   
        $html = ""; // HTML as response
        $tag = $this->getDoctrine()
            ->getRepository('YourBundle:Tag')
            ->find($tagId);

        $categories = $tag->getCategories();

        foreach($categories as $cat){
            $html .= '<option value="'.$cat->getId().'" >'.$cat->getName().'</option>';
        }

        return new Response($html, 200);
    }

3.4>-- 创建对应的路由app/config/routing.yml。如果您使用 FOSJsRoutingBundle，请记住公开您的路线（否则您将不得不进行硬编码，这不是一个好主意）。

get_categories_from_tag:
    pattern: /{_locale}/admin/gd/admin/merchant/get-categories-from-tag/{tagId}
    defaults: {_controller: GDAdminBundle:MerchantAdmin:getCategoryOptionsFromTag}
    options:
        expose: true

3.5>-- 发出 Ajax 请求并使用响应

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">

        $(document).ready(function(){
            var primaryTag = $("#{{ admin.uniqId }}_primaryTag");
            primaryTag.change(updateCategories()); // Bind the function to updateCategories
            primaryTag.change(); // Manual trigger to update categories in Document load.

            function updateCategories(){
                return function () {
                    var tagId = $("#{{ admin.uniqId }}_primaryTag option:selected").val();
                    var primaryCategory = $("#{{ admin.uniqId }}_primaryCategory");
                    primaryCategory.empty();
                    primaryCategory.trigger("liszt:updated");
                    var locale = '{{ app.request.get('_locale') }}';

                    var objectId = '{{ admin.id(object) }}'

                    var url = Routing.generate('get_categories_from_tag', { '_locale': locale, 'tagId': tagId, _sonata_admin: 'gd_admin.merchant', id: objectId });
                    $.post(url, { tagId: tagId }, function(data){
                        primaryCategory.empty().append(data);
                        primaryCategory.trigger("liszt:updated");
                    },"text");

                    primaryCategory.val("option:first").attr("selected", true);
                };
            }
        });
    </script>
{% endblock %}

陷阱 1：