php - Sonata admin - 侧面菜单无法正常工作

Question

规范:Symfony 3.3.2，sonata-project/admin-bundle:^3.18，sonata-project/doctrine-orm-admin-bundle: ^3.1

我已经按照 this answer 实现了自定义仪表板 block .它工作正常，但现在 Sonata Admin 的侧边菜单不起作用。

_{(来源:ibin.co)}

菜单已显示，但单击时不会激活链接。

配置.yml

sonata_block:
    blocks:
        sonata.block.service.tasks: ~

sonata_admin:
    dashboard:
            blocks:
                - { position: top, type: sonata.block.service.tasks, class: col-md-12}

服务.yml

sonata.block.service.tasks:
    class: AppBundle\Block\Service\TaskService
    tags:
        - { name: sonata.block }
    arguments:
        - 'sonata.block.service.task'
        - '@templating.engine.twig'
        - '@doctrine.orm.entity_manager'
    calls:
        - [ setContainer, [ '@service_container' ] ]

我的任务服务

<?php

namespace AppBundle\Block\Service;

use Doctrine\ORM\EntityManager;
use Sonata\AdminBundle\Form\FormMapper;
use Sonata\BlockBundle\Block\BlockContextInterface;
use Sonata\BlockBundle\Block\Service\AbstractAdminBlockService;
use Sonata\BlockBundle\Model\BlockInterface;
use Sonata\CoreBundle\Validator\ErrorElement;
use Symfony\Bundle\FrameworkBundle\Templating\EngineInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpFoundation\Response;

class TaskService extends AbstractAdminBlockService
{
    private $em;

    /** @var \Symfony\Component\DependencyInjection\ContainerInterface */
    private $container;

    /**
     * {@inheritdoc}
     */
    public function __construct($name, EngineInterface $templating, EntityManager $entityManager)
    {
        parent::__construct($name, $templating);
        $this->em = $entityManager;
    }

    public function setContainer(ContainerInterface $container)
    {
        $this->container = $container;
    }

    /**
     * {@inheritdoc}
     */
    public function execute(BlockContextInterface $blockContext, Response $response = null)
    {
        $settings = array_merge($this->getDefaultSettings(), $blockContext->getSettings());

        $admin_pool = $this->container->get('sonata.admin.pool');

        $completed = $this->em->getRepository('AppBundle:Task')->findBy(array('status' => 0), array(), 10);
        $open = $this->em->getRepository('AppBundle:Task')->findBy(array('status' => 1), array(), 10);
        $inProgress = $this->em->getRepository('AppBundle:Task')->findBy(array('status' => 2), array(), 10);

        return $this->renderResponse(':Block:tasks.html.twig', array(
            'admin_pool' => $admin_pool,
            'block'      => $blockContext,
            'settings'   => $settings,
            'completed'  => $completed,
            'open'       => $open,
            'inProgress' => $inProgress,
        ), $response);
    }

    /**
     * {@inheritdoc}
     */
    public function validateBlock(ErrorElement $errorElement, BlockInterface $block)
    {
    }

    /**
     * {@inheritdoc}
     */
    public function buildEditForm(FormMapper $formMapper, BlockInterface $block)
    {
        $formMapper->add('settings', 'sonata_type_immutable_array', array(
            'keys' => array(
                array(
                    'content',
                    'textarea',
                    array(),
                ),
            ),
        ));
    }

    /**
     * {@inheritdoc}
     */
    public function getName()
    {
        return 'Dashboard Tasks';
    }

    /**
     * {@inheritdoc}
     */
    public function getDefaultSettings()
    {
        return array(
            'content' => 'Insert your custom content here',
        );
    }
}

Twig 模板

{% block block %}
<style>
    body {
        padding: 10px;
    }

    #exTab3 .nav-pills > li > a {
        border-radius: 4px 4px 0 0;
    }

    #exTab3 .tab-content {
        color: black;
        padding: 5px 15px;
    }

    .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
        color: #000000;
    }

    .nav-pills > li.active.completed > a, .nav-pills > li.active.completed > a:focus, .nav-pills > li.active.completed > a:hover {
        border-top: 3px solid rgba(0,255,0,0.2);
        background: rgba(0,255,0,0.2);
    }

    .nav-pills > li.active.open_tab > a, .nav-pills > li.active.open_tab > a:focus, .nav-pills > li.active.open_tab > a:hover {
        border-top: 3px solid rgba(255,255,0,0.2);
        background: rgba(255,255,0,0.2);
    }

    .nav-pills > li.active.in_progress > a, .nav-pills > li.active.in_progress > a:focus, .nav-pills > li.active.in_progress > a:hover {
        border-top: 3px solid rgba(51, 51, 255, 0.2);
        background: rgba(51, 51, 255, 0.2);
    }

    .tab-content.completed_content {
        /*border-top: 3px solid rgba(0, 231, 101, 0.35);*/
        background-color: rgba(0,255,0,0.2);
    }

    .tab-content.open_content {
        /*border-top: 3px solid rgba(251, 240, 105, 0.45);*/
        background-color: rgba(255,255,0,0.2);
    }

    .tab-content.in_progress_content {
        /*border-top: 3px solid rgba(60, 141, 188, 0.36);*/
        background-color: rgba(51, 51, 255, 0.2);
    }

    .completed {
        /*border-top: 3px solid rgba(0, 231, 101, 0.35);*/
        background: rgba(0,255,0,0.2);
    }

    .open_tab {
        /*border-top: 3px solid rgba(251, 240, 105, 0.45);*/
        background: rgba(255,255,0,0.2);
    }

    .in_progress {
        /*border-top: 3px solid rgba(60, 141, 188, 0.36);*/
        background: rgba(51, 51, 255, 0.2);
    }
</style>


<div><h2>Tasks</h2></div>
<div id="exTab3">
    <ul class="nav nav-pills">
        <li class="active completed"><a href="#1b" data-toggle="tab">Completed</a></li>
        <li class="open_tab"><a href="#2b" data-toggle="tab">Open</a></li>
        <li class="in_progress"><a href="#3b" data-toggle="tab">In Progress</a></li>
    </ul>
    <div class="tab-content clearfix completed_content">
        <div class="tab-pane active" id="1b">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Task ID</th>
                    <th>Subject</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                {% for task in completed %}
                    <tr>
                        <td>{{ task.id }}</td>
                        <td>{{ task.subject }}</td>
                        <td>{% if task.status  == 0 %}
                                Completed
                            {% elseif task.status == 1 %}
                                Open
                            {% elseif task.status == 2 %}
                                In Progress
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    No record found
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="tab-pane" id="2b">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Task ID</th>
                    <th>Subject</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                {% for task in open %}
                    <tr>
                        <td>{{ task.id }}</td>
                        <td>{{ task.subject }}</td>
                        <td>{% if task.status  == 0 %}
                                Completed
                            {% elseif task.status == 1 %}
                                Open
                            {% elseif task.status == 2 %}
                                In Progress
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    No record found
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="tab-pane" id="3b">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Task ID</th>
                    <th>Subject</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                {% for task in inProgress %}
                    <tr>
                        <td>{{ task.id }}</td>
                        <td>{{ task.subject }}</td>
                        <td>{% if task.status  == 0 %}
                                Completed
                            {% elseif task.status == 1 %}
                                Open
                            {% elseif task.status == 2 %}
                                In Progress
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    No record found
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{#{{ sonata_block_render_event('sonata.admin.dashboard.bottom', { 'admin_pool': sonata_admin.adminPool }) }}#}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function (e) {
        $(".completed").click(function (e) {
            $(".tab-content").addClass('completed_content');
            $(".tab-content").removeClass('open_content');
            $(".tab-content").removeClass('in_progress_content');
        });
        $(".open_tab").click(function (e) {
            $(".tab-content").removeClass('completed_content');
            $(".tab-content").addClass('open_content');
            $(".tab-content").removeClass('in_progress_content');
        });
        $(".in_progress").click(function (e) {
            $(".tab-content").removeClass('completed_content');
            $(".tab-content").removeClass('open_content');
            $(".tab-content").addClass('in_progress_content');
        });
    });
</script>
{% endblock %}

Answer 1

在您的 twig 文件中，您将覆盖 Sonata 的内部 jQuery 文件。删除这两行，代码将得到更正:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>