Widoki - dodaj otoki DIV wokół grupy

43

W Drupal 7 stworzyłem widok, który zawiera kilka pól. Pola są pogrupowane według innego pola (termin ID pola). Znacznik wygląda następująco:

<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>

Potrzebuję jednak znaku, aby wyglądał tak:

<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>

Wiem, że możesz użyć views-view-unformatted.tpl.php (Styl wyjściowy), aby przesłonić widok, a następnie wstawić DIV, aby owinąć grupę.

Potrzebuję jednak mojego opakowania DIV, aby tak było <div id="term_ID_{number of ID}">. Identyfikator numeru będzie odpowiadał terminowi, który został użyty do grupowania pól. Domyślnie, jeśli używasz views-view-unformatted.tpl.php, nie możesz wstawiać do niego tokenów dla identyfikatorów terminów.

Każda pomoc będzie mile widziana.

szeroki uśmiech
źródło

Odpowiedzi:

50

Musiałem ostatnio zrobić to samo. Możesz utworzyć plik szablonu:

  • Znajdź szablon pod /modules/views/themes/views-view-unformatted.tpl.php.
  • Skopiuj go do swojego /sites/all/themes/<your-theme>folderu i zmień nazwę na views-view-unformatted--<nodetype>.tpl.php.
  • Edytuj plik, dodając divcały szablon. <h3>Tag to nazwa grupy.

Oto jak może wyglądać zmodyfikowany plik szablonu.

<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-->
Kristy Gislason
źródło
4
To też dla mnie zadziałało, ta dużo :)
Clive
Zaoszczędziłeś mi czasu, kolego!
DropDragon
1
Każdy, kto czyta tę odpowiedź i zastanawia się, jak ustalić, jak nazwać swój tplplik, zapoznaj się z odpowiedzią tutaj drupal.stackexchange.com/questions/11468/… tldr; na twojej stronie edycji, w obszarze zaawansowanym kliknij motyw: informacja
user56reinstatemonica8 16.04.16
Chociaż Q i A to Drupal 7, to samo działa z Drupal 8.
Duncanmoo
16

Spróbuj Format: lista HTML. Spowoduje to zawinięcie całej listy przedmiotów. Na mój cel jest idealny (lista pozycji taksonomii). Mam nadzieję że to pomoże.

Dagomar
źródło
To jest dobre. Chciałem dodać pole grupy jako klasę opakowania, aby móc odpowiednio stylizować, ale wydaje się, że nie mogę tego robić w samym interfejsie widoku. To, co zrobiłem zamiast tego, jeśli komuś to pomaga, to: najpierw SORTUJ według tego pola, a następnie użyj selektora css jako pierwszego.
klidifia,
11

Czy wypróbowałeś już funkcję Rewrite results ? Kliknij pole, które chcesz edytować, i przewiń w dół, aż zobaczysz Przepisz wyniki . Zaznacz pole Przepisz dane wyjściowe tego pola, a następnie dostosuj kod HTML w razie potrzeby. W przypadku tokenów można użyć Wzorów zastępczych pokazanych w polu poniżej obszaru wprowadzania tekstu.

Odnośnie wzorów zastępczych , zwróć uwagę na ostrzeżenie, które wyświetla:

Pamiętaj, że ze względu na kolejność renderowania nie można używać pól następujących po tym polu; jeśli potrzebujesz pola niewymienionego tutaj, zmień kolejność pól.

Jeśli to nie wystarczy, spróbuj dodać nowe pole Globalne: tekst niestandardowy . Umożliwi to dodanie dowolnego arbitralnego kodu HTML. Wzory zastępcze są również dostępne tutaj. Możesz użyć dwóch oddzielnych globalnych: niestandardowych pól tekstowych, aby dodać <div>tagi początkowe i końcowe.

Patrick Kenny
źródło
Cześć Dzięki za pomoc. Próbuję zmienić pole grupowania (w opcji Strona: Opcje stylu> Pole grupowania nr.1) Wydaje się, że nie ma żadnych opcji zmiany wyniku tego pola grupowania. Używając Global: Custom textefektów, wiersz w grupie, ale nie na zewnątrz grupy,
big_smile
Po wybraniu pola Grupowanie nr 1 dostępne są opcje Użyj renderowanego wyniku do grupowania wierszy i klasy Wiersz . Żadne z nich nie robi tego, czego chcesz?
Patrick Kenny
1
Cześć Dzięki za pomoc. Te opcje po prostu dodają otoki DIv wokół poszczególnych pól w przeciwieństwie do całej grupy (która jest tworzona przez pole Grupowanie nr 1).
big_smile
@PatrickKenny Czy wiesz, czy ta metoda ma zły wpływ na czas renderowania widoku?
user5950
@ user5950 Cały czas korzystam z przepisywania wyników, ale nigdy nie zauważyłem spadku wydajności. Myślę, że inne typowe zadania widoków, takie jak dodawanie relacji, mogą bardziej obniżyć wydajność, zanim Rewrite Results to zrobi.
Patrick Kenny,
5

W tych dniach spotkałem ten sam problem. A oprócz opakowania grupowego potrzebowałem klasy css, takiej jak pierwsza / ostatnia na grupę.

Dodałem więc w views-view-unformatted.tpl.php następujący kod 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);
?>

Tutaj część HTML z otoki i klas:

<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>

Dane wyjściowe będą:

<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>

Może być pomocny - ciesz się

Andres
źródło
3

Myślę, że największą zagadką jest sposób generowania klasy przy użyciu wartości $ title w tagach h3. Wypróbowałbym moduł Transliteration i następujący fragment:

<?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);
?>

To działało dla mnie, gdy musiałem wykonać nazwane kotwice w widoku.

Artur
źródło
2

Bardzo przydatne - musiałem dodać niektóre klasy alfa / omega dla układu opartego na siatce, a także niektóre nieparzyste, aby móc wyczyścić oba dla każdego wiersza. Edytowałem linię z:

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

do tego:

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

Co daje wymaganą moc wyjściową.

soulston
źródło
2

Miałem dzisiaj podobny problem, ale potrzebowałem określonej klasy w html opakowania, w moim przypadku widok jest pogrupowany według terminów taksonomicznych i potrzebujemy określonego stylu dla każdego terminu, a więc konkretnej klasy na termin. Oto jak zmieniliśmy widok niesformatowanego szablonu:

<?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-->

W widoku wyświetlanie pola terminu systematyka jest ustawione na: „Pokaż identyfikator encji”. Otrzymujemy więc identyfikator jako część nazwy klasy, a następnie ładujemy tytuł na podstawie tego samego identyfikatora.

vegardjo
źródło
2

Dla każdego, kto nie chce nurkować w kodzie i bawić się szablonami, można to łatwo zrobić, usuwając domyślne klasy div za pomocą Fences i dodając własny div do prefiksu i sufiksu pola za pomocą prostego formatera pola . Jeśli masz wiele pól, po prostu dodaj zawierający div w prefiksie pierwszego pola oraz w sufiksie ostatniego pola.

Tak więc natywna struktura z niepasowanymi obszarami przedrostków i sufiksów wyglądałaby mniej więcej tak:

<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>

Gdybyś miał dodać klasę „foo”, stałoby się

   <div class="foo"> *:prefix posted here*
    Leaner markup means better front-end performance.
   </div> *:suffix posted here*
Ezdrasz
źródło
2

Odpowiedź od chrisjlee powyżej wyjaśnia to dobrze, z wyjątkiem tego, jak nazwać plik szablonu. Jeśli chcesz zmienić tylko jeden widok, nowy plik musi zawierać nazwę komputera widoku. Możesz to znaleźć w adresie URL strony edycji widoku. Bardzo dobrze wyjaśniono w tym komentarzu na podobny temat: https://www.drupal.org/node/1383696#comment-6729128

Potrzebowałem klasy wokół wierszy, używając wartości $ title, aby móc renderować je w 2 kolumnach. Oto kod:

<?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-->
jn2
źródło
2

Natknąłem się na podobny problem. Chciałem, aby moje zgrupowane wiersze wyświetlały się w akordeonie ładowania początkowego. Nie mogłem pracować z modułem Views Bootstrap .
Komentarz # 4 rozwiązał mój problem.
Oto jak views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpwygląda mój

<?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>

oczywiście, aby akordeon działał, musisz także edytować widoki-widok- [moja_nazwa_widoku] - [moja_nazwa_wyświetlania] .tpl.php, aby mieć

<?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; ?>

Zostawiłem domyślny kod z modułu między komentarzami HTML.
Mam nadzieję, że to pomoże.

Mars
źródło