使用ajax与sonata管理列表视图分页

时间:2015-04-06 14:51:51

标签: sonata-admin

我在我的项目中使用sonata admin。在列表视图中,当我从clgination获取第二个列表时,sonata刷新页面。那是sonata的默认行为。有没有办法在列表视图分页中使用ajax调用!!!

enter image description here

使用可排序列表视图时的相同问题。

感谢。

1 个答案:

答案 0 :(得分:2)

这是可能的,但您必须覆盖奏鸣曲管理包的一些基本功能。

使用

进行测试
  • symfony 2.6.6
  • sonata admin-bundle dev-master(4f23e1a30e49681bf8ebdbbae549848784be7699)

<强> 1。编辑您的捆绑服务.yml

您必须实现自己的CrudController和新的列表模板。在services.yml中说明这一点

sonata.admin.youradmin:
        class: Your\Bundle\Admin\YourAdmin
        tags:
            - { name: sonata.admin, manager_type: orm, group: "groupname", label: "grouplabel" }
        arguments:
            - ~
            - Your\Bundle\Entity\EntityClass
            - YourBundle:YourNewCrud # <- add your crud class here
        calls:
            - [ setLabelTranslatorStrategy, ["@sonata.admin.label.strategy.underscore"]]
            - [ setTemplate, [list, YourBundle:YourAdmin:list.html.twig]] # <- tell sonata you want this template for list

<强> 2。添加新的树枝模板

现在将以下模板添加到您的包中Resources / views / YourAdmin / list.html.twig:

{# extends from the normal base_list.html.twig, but when this template is
   rendered via an ajax-call, extend from an ajax-list.html.twig, we'll
   add later #}
{% extends app.request.xmlHttpRequest
? 'YourBundle:ajax-list.html.twig'
: 'SonataAdminBundle:CRUD:base_list.html.twig' %}

{# YourBundle:ajax-list.html.twig is the path where you have your template, if your template is inside views/Admin, then put it like this: YourBundle:Admin:ajax-list.html.twig #}

{# Here I copied the list_table block from the original list.html.twig 
   from sonata.. I added custom JS-code below to do the ajax call #}
{% block list_table %}
    {# The code in this block is copied from sonata.. I just added the JS-code below, and added the 'actionList' id here #}

    <div id="actionList" class="col-xs-12 col-md-12">
        {% if admin.hasRoute('batch') %}
        <form action="{{ admin.generateUrl('batch', {'filter': admin.filterParameters}) }}" method="POST" >
            <input type="hidden" name="_sonata_csrf_token" value="{{ csrf_token }}">
            {% endif %}

            {# Add a margin if no pager to prevent dropdown cropping on window #}
            <div class="box box-primary" {% if admin.datagrid.pager.lastPage == 1 %}style="margin-bottom: 100px;"{% endif %}>
                <div class="box-body {% if admin.datagrid.results|length > 0 %}table-responsive no-padding{% endif %}">
                    {{ sonata_block_render_event('sonata.admin.list.table.top', { 'admin': admin }) }}

                    {% block list_header %}{% endblock %}

                    {% set batchactions = admin.batchactions %}
                    {% if admin.datagrid.results|length > 0 %}
                        <table class="table table-bordered table-striped sonata-ba-list">
                            {% block table_header %}
                                <thead>
                                <tr class="sonata-ba-list-field-header">
                                    {% for field_description in admin.list.elements %}
                                        {% if admin.hasRoute('batch') and field_description.getOption('code') == '_batch' and batchactions|length > 0 %}
                                            <th class="sonata-ba-list-field-header sonata-ba-list-field-header-batch">
                                                <input type="checkbox" id="list_batch_checkbox">
                                            </th>
                                        {% elseif field_description.getOption('code') == '_select' %}
                                            <th class="sonata-ba-list-field-header sonata-ba-list-field-header-select"></th>
                                        {% elseif field_description.name == '_action' and app.request.isXmlHttpRequest %}
                                            {# Action buttons disabled in ajax view! #}
                                        {% elseif field_description.getOption('ajax_hidden') == true and app.request.isXmlHttpRequest %}
                                            {# Disable fields with 'ajax_hidden' option set to true #}
                                        {% else %}
                                            {% set sortable = false %}
                                            {% if field_description.options.sortable is defined and field_description.options.sortable %}
                                                {% set sortable             = true %}
                                                {% set sort_parameters      = admin.modelmanager.sortparameters(field_description, admin.datagrid) %}
                                                {% set current              = admin.datagrid.values._sort_by == field_description or admin.datagrid.values._sort_by.fieldName == sort_parameters.filter._sort_by %}
                                                {% set sort_active_class    = current ? 'sonata-ba-list-field-order-active' : '' %}
                                                {% set sort_by              = current ? admin.datagrid.values._sort_order : field_description.options._sort_order %}
                                            {% endif %}

                                            {% spaceless %}
                                                <th class="sonata-ba-list-field-header-{{ field_description.type}} {% if sortable %} sonata-ba-list-field-header-order-{{ sort_by|lower }} {{ sort_active_class }}{% endif %}">
                                                    {% if sortable %}<a href="{{ admin.generateUrl('list', sort_parameters) }}">{% endif %}
                                                        {{ admin.trans(field_description.label, {}, field_description.translationDomain) }}
                                                        {% if sortable %}</a>{% endif %}
                                                </th>
                                            {% endspaceless %}
                                        {% endif %}
                                    {% endfor %}
                                </tr>
                                </thead>
                            {% endblock %}

                            {% block table_body %}
                                <tbody>
                                {% include admin.getTemplate('outer_list_rows_' ~ admin.getListMode()) %}
                                </tbody>
                            {% endblock %}

                            {% block table_footer %}
                            {% endblock %}
                        </table>
                    {% else %}
                        <div class="info-box">
                            <span class="info-box-icon bg-aqua"><i class="fa fa-arrow-circle-right"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">{{ 'no_result'|trans({}, 'SonataAdminBundle') }}</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 0%"></div>
                                </div>
                            <span class="progress-description">
                                {% if not app.request.xmlHttpRequest %}
                                    {% include 'SonataAdminBundle:Button:create_button.html.twig' %}
                                {% endif %}
                            </span>
                            </div><!-- /.info-box-content -->
                        </div>
                    {% endif %}

                    {{ sonata_block_render_event('sonata.admin.list.table.bottom', { 'admin': admin }) }}
                </div>
                {% block list_footer %}
                    {% if admin.datagrid.results|length > 0 %}
                        <div class="box-footer">
                            <div class="form-inline clearfix">
                                {% if not app.request.isXmlHttpRequest %}
                                    <div class="pull-left">
                                        {% if admin.hasRoute('batch') and batchactions|length > 0  %}
                                            {% block batch %}
                                                <script>
                                                    {% block batch_javascript %}
                                                    jQuery(document).ready(function ($) {
                                                        $('#list_batch_checkbox').on('ifChanged', function () {
                                                            $(this)
                                                                    .closest('table')
                                                                    .find('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]')
                                                                    .iCheck($(this).is(':checked') ? 'check' : 'uncheck')
                                                            ;
                                                        });

                                                        $('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]')
                                                                .on('ifChanged', function () {
                                                                    $(this)
                                                                            .closest('tr, div.sonata-ba-list-field-batch')
                                                                            .toggleClass('sonata-ba-list-row-selected', $(this).is(':checked'))
                                                                    ;
                                                                })
                                                                .trigger('ifChanged')
                                                        ;
                                                    });
                                                    {% endblock %}
                                                </script>

                                                {% block batch_actions %}
                                                    <label class="checkbox" for="{{ admin.uniqid }}_all_elements">
                                                        <input type="checkbox" name="all_elements" id="{{ admin.uniqid }}_all_elements">
                                                        {{ 'all_elements'|trans({}, 'SonataAdminBundle') }}
                                                        ({{ admin.datagrid.pager.nbresults }})
                                                    </label>

                                                    <select name="action" style="width: auto; height: auto" class="form-control">
                                                        {% for action, options in batchactions %}
                                                            <option value="{{ action }}">{{ options.label }}</option>
                                                        {% endfor %}
                                                    </select>
                                                {% endblock %}

                                                <input type="submit" class="btn btn-small btn-primary" value="{{ 'btn_batch'|trans({}, 'SonataAdminBundle') }}">
                                            {% endblock %}
                                        {% endif %}
                                    </div>


                                    <div class="pull-right">
                                        {% if admin.hasRoute('export') and admin.isGranted("EXPORT") and admin.getExportFormats()|length %}
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                    <i class="glyphicon glyphicon-export"></i>
                                                    {{ "label_export_download"|trans({}, "SonataAdminBundle") }}
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    {% for format in admin.getExportFormats() %}
                                                    <li>
                                                        <a href="{{ admin.generateUrl('export', admin.modelmanager.paginationparameters(admin.datagrid, 0) + {'format' : format}) }}">
                                                            <i class="glyphicon glyphicon-download"></i>
                                                            {{ format|upper }}
                                                        </a>
                                                    <li>
                                                        {% endfor %}
                                                </ul>
                                            </div>

                                            &nbsp;-&nbsp;
                                        {% endif %}

                                        {% block pager_results %}
                                            {% include admin.getTemplate('pager_results') %}
                                        {% endblock %}
                                    </div>
                                {% endif %}
                            </div>

                            {% block pager_links %}
                                {% if admin.datagrid.pager.haveToPaginate() %}
                                    <hr/>
                                    {% include admin.getTemplate('pager_links') %}
                                {% endif %}
                            {% endblock %}
                        </div>
                    {% endif %}
                {% endblock %}
            </div>
            {% if admin.hasRoute('batch') %}
        </form>
        {% endif %}
    </div>

 {# When this request is not via ajax, add the following JS-code
    this will trigger an ajax-request, and uses the normal a-href location #}
 {% if not app.request.xmlHttpRequest %}
        <script>
            $('body').on('click', '.pagination li a', function(e){
                var url = $(this).attr('href');

                $.post(url,
                    {},
                    function(response){
                        if(response.code == 100 && response.success){
                            $('#actionList').replaceWith(response.content);
                        }
                    }
                );

                e.preventDefault();
                return false;
            });

        </script>
    {% endif %}
{% endblock %}

第3。添加ajax模板 我们这样做是为了防止原始包输出我们不需要的所有内容:

YourBundle /资源/视图/ YourAdmin / Ajax的list.html.twig:

{% block list_table %}{% endblock %}

<强> 4。添加自定义CrudController 现在唯一要做的就是,我们要覆盖原始的listAction,以便我们可以返回JSON而不是纯HTML。在YourBundle / Controller /

中添加YourCrudController.php

添加以下

<?php

namespace Your\Bundle\Controller;

use Sonata\AdminBundle\Controller\CRUDController as Controller;    
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;

class YourCrudController extends Controller
{       

    public function listAction(Request $request = null)
    {    
        // call original listAction function to get the right HTML
        $response = parent::listAction($request);

        if($request->isXmlHttpRequest()) {
            // disable the profile, to prevent profiler code
            $this->container->get('profiler')->disable();

            // return JsonResponse
            return new JsonResponse(array('success' => true, 'code' => 100, 'content' => $response->getContent()));
        }

        return $response;
    }
}

坐下来,点击f5,点击寻呼机享受!