in Профессиональное

Symfony: прячем фильтры в админ-генераторе

Фильтры в админ-генераторе штука хорошая, но всегда думаешь куда бы их пристроить на странице. Если полей в модели больше чем 3-5 это становится проблемой. Предлагаю вашему вниманию небольшой трюк по этому поводу. Нам потребуется JQuery, любимый редактор и немного терпения:

Для начала посмотрим как выглядит DOM для блока админ-генератора:

И он же “вживую”:

Что мы хотим с этим сделать?

  • Спрятать фильтры для этого и всех остальных админ-генераторов.
  • Для отображения заиметь ссылку или кнопку.
  • Потратить как можно меньше времени на это.

Как мы это будем делать? Для начала скачаем и подключим к проекту JQuery. Я это сделаю при помощи плагина sfJqueryReloadedPlugin. Вы же можете поступать как вам нравится.

Далее создадим ссылку, кликая на которую можно будет показать/скрыть фильтры:

jQuery(function() {
  // прячем/показываем фильтры
  var filter_show_hide = $('<a>') // создаем DOM элемент
    .attr('href','#')
    .attr('id','filter-show-hide')
    .html('toggle filters ∇')
    .css('fontWeight', 'bold') // немного стиля
    .css('margin', '5px')
    .click(function(){
      $('#sf_admin_bar').toggle();
      if( $("#filter-show-hide").html() == 'toggle filters ∇' ) // изменяем текст ссылки
        $("#filter-show-hide").html('toggle filters Δ');
      else
        $("#filter-show-hide").html("toggle filters ∇");
      return false;
    });
});

Обратите внимание на то что мы меняем html тело ссылки – дельта (свернуть) , набла (развернуть). Можно использовать картинки, стрелочки и все что вам нравится.

После этого нам остается добавить нашу кнопку-ссылку над фильтрами и скрыть фильтр по умолчанию:

jQuery(function() {
  // ...
  $('#sf_admin_bar')
    .before(filter_show_hide) // размещаем ссылку перед фильтром
    .hide(); // скрываем фильтры
});

И добавить несколько стилей:

<style type="text/css">
  #sf_admin_bar {
    float:none; /* чтобы блок не плавал справа - теперь он располагается над списком */
    display: none; /* прячем фильтры средствами CSS - в принципе скриптом при загрузке можно и не прятать - это паранойя */
  }
  #sf_admin_bar .sf_admin_filter form table {
    width: 700px; /* делаем немного пошире таблицу с фильтрами */
  }
</style>

И вуаля:


Быстро, просто, не геморно. ))

Code with fun!

Write a Comment

Comment

*

  1. =) Сам давно уже думал такое сделать, а то не всегда хватает ширины страницы для данных. Но я хочу сделать чтобы справа выезжало

    • Ну это так, придумалось мимоходом )) Эффект и расположение можно менять по вкусу. Меня волнует ровно один вопрос – как я раньше без этого жил? )))

  2. $(document).ready(function(){
    $(‘#sf_admin_bar’).dialog({
    ‘title’: ‘Filter’,
    position: ‘right’,
    width: 400,
    height: 300
    });
    });

    используется jQuery-ui, довольно красиво вытаскивается все в модальное окно

    • Есть плагин – sfAdminThemejRollerPlugin кажется. Он тоже фильтры в JQueryUI dialog запихивает. Да это тоже выход. Хотя большие формы смотрятся весьма похабно. Но они и с моим методом смотрятся не лучше )