2017-06-19 84 views
3

规格:Symfony 3.3.2sonata-project/admin-bundle: ^3.18sonata-project/doctrine-orm-admin-bundle: ^3.1索纳塔管理 - 侧菜单不工作

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

Side Menu

菜单显示,但它不点击激活链接。

config.yml

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

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

services.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', 
     ); 
    } 
} 

嫩枝模板

{% 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 %} 
+0

我认为你必须在你的'twig'文件中使用一些继承的代码,或者在那里添加come代码。 – Zuhayer

回答

2

在你的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>