Представления - Добавить обертку DIV вокруг группы


43

В Drupal 7 я создал View, в котором перечислены несколько полей. Поля сгруппированы по другому полю (термин ID поля). Разметка выглядит так:

<h3>[Term 1]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

<h3>[Term 2]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

<h3>[Term 3]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

Однако мне нужно, чтобы разметка выглядела так:

<div id="term_1">
     <h3>[Term 1]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

<div id="term_2">
     <h3>[Term 2]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

<div id="term_3">
     <h3>[Term 3]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

Я знаю, что вы можете использовать views-view-unformatted.tpl.php (Style Output), чтобы переопределить представление, а затем вставить DIV, чтобы обернуть группу.

Тем не менее, мне нужен мой упаковщик DIV, чтобы быть таким <div id="term_ID_{number of ID}">. Идентификатор номера будет соответствовать термину, который использовался для группировки полей. По умолчанию, если вы используете views-view-unformatted.tpl.php, вы не можете вставить в него токены для идентификаторов терминов.

Любая помощь будет оценена.

Ответы:


50

Мне нужно было сделать то же самое в последнее время. Вы можете создать файл шаблона:

  • Найдите шаблон под /modules/views/themes/views-view-unformatted.tpl.php.
  • Скопируйте его в свою /sites/all/themes/<your-theme>папку и переименуйте в views-view-unformatted--<nodetype>.tpl.php.
  • Отредактируйте файл, добавив divвокруг всего шаблона. <h3>Тег название группы.

Вот как может выглядеть измененный файл шаблона.

<div class="your-class">
<?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3><!--this is the group name-->
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes_array[$id]; ?>">
    <?php print $row; ?>
</div>
<?php endforeach; ?>
</div><!--end your div-->

4
Это тоже сработало для меня, очень много :)
Клайв

Ты сэкономил мое время, приятель!
DropDragon

1
Любой, кто читает этот ответ, задается вопросом, как определить, как назвать свой tplфайл, см. Ответ здесь: drupal.stackexchange.com/questions/11468/… tldr; по вашему мнению, на странице редактирования, в разделе «Дополнительно», щелкните тему: информация
user56reinstatemonica8

Хотя Q и A - это Drupal 7, то же самое работает и для Drupal 8.
Duncanmoo

16

Попробуйте Формат: список HTML. Это обернет все это в список предметов. Для моей цели это идеально (список пунктов таксономии). Надеюсь это поможет.


Это хорошо. Я хотел добавить поле группы в качестве класса для оболочки, чтобы я мог соответственно стилизовать, но, похоже, не могу сделать это в самом интерфейсе представлений. Вместо этого, если это кому-то помогает, это: сначала отсортировать по этому полю, а затем использовать css first selector.
Клидифия

11

Вы пробовали переписать результаты результатов ? Нажмите на поле, которое вы хотите изменить, и прокрутите вниз, пока не увидите результаты перезаписи . Установите флажок « Перезаписать выходные данные этого поля», а затем настроить HTML при необходимости. Для токенов вы можете использовать Шаблоны замены, показанные в поле под областью ввода текста.

Что касается шаблонов замены , обратите внимание на предупреждение, которое отображает виды:

Обратите внимание, что из-за порядка рендеринга вы не можете использовать поля, которые идут после этого поля; если вам нужно поле, не указанное здесь, измените порядок полей.

Если этого недостаточно, попробуйте добавить новое поле, Global: Custom text . Это позволит вам добавить произвольный HTML- код, и здесь также доступны шаблоны замены . Вы можете использовать два отдельных глобальных: настраиваемых текстовых поля для добавления <div>начального и конечного тегов.


Привет спасибо за вашу помощь Я пытаюсь изменить поле группировки (в разделе Page: Параметры стиля> Поле группировки Nr.1) Похоже, что нет никаких вариантов, чтобы изменить вывод этого поля группировки. Используя Global: Custom textэффекты строку в группе , но не за пределами группы,
big_smile

При выборе поля «Группировка Nr.1» доступны параметры « Использовать вывод для группировки строк и класс строк » . Ни один из тех не делает то, что вы хотите?
Патрик Кенни

1
Привет спасибо за вашу помощь Эти параметры просто добавляют DIv-оболочки для отдельных полей, а не для всей группы (которая создается полем группирования Nr.1).
big_smile

@PatrickKenny Знаете ли вы, если этот метод плохо влияет на время рендеринга представления?
user5950

@ user5950 Я постоянно использую результаты перезаписи, но никогда не замечал снижения производительности. Я думаю, что другие общие задачи представлений, такие как добавление отношений, с большей вероятностью будут снижать производительность до того, как будут перезаписаны результаты.
Патрик Кенни

5

В эти дни я столкнулся с той же проблемой. Кроме того, что мне было нужно, помимо групповой обертки, был класс CSS, как первый / последний в каждой группе.

Поэтому я добавил в views-view-unformatted.tpl.php следующий код php:

<?php
  #### defs
  // call a global variable every time the template is called
  global $static;
  // be aware of the key_name for the global variable to keep it 
  // unique for every display
  // I call the same view in one panel several times with 
  // different arguments 
  $key_name = $view->name . '_' . $view->current_display ;
  foreach ($view->args as $value) {
    $key_name .= '_' . $value;
  }
  // init classes array
  $group_classes = array();
  ## groups counter - store in global variable 
  if (!isset($static[$key_name]['gc'])) {
    $static[$key_name]['gc'] = 1;
  }
  else {
    $static[$key_name]['gc']++;
  }
  #### classes
  ## counter
  $group_classes[] = 'group-' . $static[$key_name]['gc'];
  ## first
  if ($static[$key_name]['gc'] == 1) {
    $group_classes[] = 'first';
  }
  ## last
  // get max row "id" per group
  foreach ($rows as $id => $row) {
    $max_id = $id;
  }
  // count results (-1 because $id starts with 0)
  $count_results = count($view->result) - 1;
  //
  if ($max_id == $count_results) {
    $group_classes[] = 'last';
  }
  ## ret
  $group_class = implode(' ', $group_classes);
?>

Вот HTML-часть с оберткой и классами:

<div class="views-group <?php print $group_class; ?>">
  <?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php foreach ($rows as $id => $row): ?>
    <div <?php if ($classes_array[$id]) { print 'class="' . $classes_array[$id] .'"';  } ?>>
      <?php print $row; ?>
    </div>
  <?php endforeach; ?>
</div>

Выход будет:

<div class="views-group group-1 first">
  content of first group
</div>
<div class="views-group group-2">
  content of second group
</div>    
<div class="views-group group-3 last">
  content of third group
</div>

Может быть полезно - наслаждайтесь


3

Так что я думаю, самая большая загадка - как генерировать класс, используя значение $ title в тегах h3. Я бы попробовал модуль транслитерации и следующий фрагмент:

<?php
  $group_class = function_exists('transliteration_get') ? transliteration_get($title) : $title;
  $group_class = trim($group_class);
  $group_class = str_replace(' ', '-', $group_class);
  $group_class = strtolower($group_class);
?>

Это сработало для меня, когда я должен был делать именованные якоря в представлении.


2

Очень полезно - мне нужно было добавить некоторые классы альфа / омега для разметки на основе сетки, а также некоторые нечетные четные, чтобы иметь возможность очистить оба для каждой строки. Я отредактировал строку из:

$group_classes[] = 'group-' . $static[$key_name]['gc'];

к этому:

$group_classes[] = 'group-' . $static[$key_name]['gc'] . ($static[$key_name]['gc'] % 2 ? ' alpha even' : ' omega odd');

Что дает требуемый результат.



2

У меня была похожая проблема сегодня, но мне нужен был определенный класс в html-оболочке, в моем случае представление сгруппировано по терминам таксономии, и нам нужен определенный стиль для каждого термина, поэтому для каждого термина нужен отдельный класс. Вот как мы изменили представление неформатированного шаблона:

<?php if(is_numeric($title)) { $term = taxonomy_term_load($title); $title = $term->name; } ?>
<div class="term-<?php print $term->tid;?>">
<?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3><!--this is the group name-->
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes_array[$id]; ?>">
    <?php print $row; ?>
</div>
<?php endforeach; ?>
</div><!--end your div-->

В представлении для отображения поля термина таксономии установлено: «Показать идентификатор объекта». Таким образом, мы получаем идентификатор как часть имени класса, а затем загружаем заголовок на основе того же идентификатора.


2

Для тех, кто не хочет погружаться в код и возиться с шаблонами, есть простой способ сделать это, удалив классы div по умолчанию, используя Fences, и добавив свой собственный div в префикс и суффикс поля, используя Simple field formatter . Если у вас есть несколько полей, просто добавьте содержащий div в префикс первого поля и в суффикс последнего поля.

Таким образом, нативная структура с незафиксированными областями префикса и суффикса будет выглядеть примерно так:

<div class="field field-name-field-test field-type-text field-label-above">
 <div class="field-label">Foobar field:&nbsp;</div>
  <div class="field-items">
   *:prefix posted here*
   <div class="field-item even">Leaner markup means better front-end performance.</div>
   *:suffix posted here*
 </div>
</div>

Если бы вы собирались добавить класс "foo", он стал бы

   <div class="foo"> *:prefix posted here*
    Leaner markup means better front-end performance.
   </div> *:suffix posted here*

2

Ответ от chrisjlee выше объясняет это хорошо, за исключением того, что назвать файл шаблона. Если вы хотите изменить только одно представление, новый файл должен содержать имя компьютера представления. Вы можете найти это в URL для страницы редактирования представления. Это очень хорошо объяснено в этом комментарии к аналогичной проблеме: https://www.drupal.org/node/1383696#comment-6729128

Мне нужен был класс вокруг строк, использующий значение $ title, чтобы я мог отобразить их в 2 столбца. Вот код:

<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print strtolower($title); ?>" > <!--added div with class-->
<?php foreach ($rows as $id => $row): ?>
  <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?>>
    <?php print $row; ?>
  </div>
<?php endforeach; ?>
</div> <!--end of added div-->

2

Я сталкивался с подобной проблемой. Я хотел, чтобы мои сгруппированные строки отображались в аккордеоне начальной загрузки. Я не мог заставить его работать с модулем Bootstrap Views .
Комментарий № 4 решил мою проблему.
Вот как views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpвыглядит моя

<?php

/**
 * @file
 * YOUR_THEME simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>

    <?php
    #### defs
      // call a global variable every time the template is called
      global $static;
      // be aware of the key_name for the global variable to keep it 
      // unique for every display
      // I call the same view in one panel several times with 
      // different arguments 
      $key_name = $view->name . '_' . $view->current_display ;
      foreach ($view->args as $value) {
        $key_name .= '_' . $value;
      }
      // init classes array
      $group_classes = array();
      ## groups counter - store in global variable 
      if (!isset($static[$key_name]['gc'])) {
        $static[$key_name]['gc'] = 1;
      }
      else {
        $static[$key_name]['gc']++;
      }
      #### classes
      ## counter
      $group_classes[] = 'group-' . $static[$key_name]['gc'];
      ## first
      if ($static[$key_name]['gc'] == 1) {
        $group_classes[] = 'first';
      }
      ## last
      // get max row "id" per group
      foreach ($rows as $id => $row) {
        $max_id = $id;
      }
      // count results (-1 because $id starts with 0)
      $count_results = count($view->result) - 1;
      //
      if ($max_id == $count_results) {
        $group_classes[] = 'last';
      }
      ## ret
      $group_class = implode(' ', $group_classes);
      $group_id = implode($group_classes); // helps me having a id whithout spaces for my accordions panels.
    ?>

    <div class="panel panel-default <?php print $group_class; ?>">
        <?php if (!empty($title)): ?>
          <?php if($group_id == 'group-1first'): ?>
                <!--<h3><?php //print $title; ?></h3>-->
                <div class="panel-heading" role="tab" id="heading<?php print $group_id; ?>">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php print $group_id; ?>" aria-expanded="true" aria-controls="collapse<?php print $group_id; ?>">
                            <?php print $title; ?>
                        </a>
                    </h3>
                </div>
                <div id="collapse<?php print $group_id; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<?php print $group_id; ?>">

            <?php else: ?>
                <div class="panel-heading" role="tab" id="heading<?php print $group_id; ?>">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php print $group_id; ?>" aria-expanded="false" aria-controls="collapse<?php print $group_id; ?>">
                            <?php print $title; ?>
                        </a>
                    </h3>
                </div>
                <div id="collapse<?php print $group_id; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php print $group_id; ?>">

            <?php endif; ?>
        <?php endif; ?>                                                 

                    <div class="panel-body">
                        <?php foreach ($rows as $id => $row): ?>
                                    <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?>>
                                        <?php print $row; ?>
                                    </div>
                        <?php endforeach; ?>
                    </div>
            </div>
    </div>

конечно, чтобы аккордеон работал, вам также нужно отредактировать views-view- [my_view_name] - [my_display_name] .tpl.php, чтобы

<?php if ($rows): ?>
    <!--<div class="view-content">-->
    <div class="view-content panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <?php print $rows; ?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

Я оставил код по умолчанию из модуля между html-комментариями.
Надеюсь, это поможет.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.