Görünümler - Bir Grubun etrafına bir sarıcı DIV ekleyin


43

Drupal 7'de, birkaç alanı listeleyen bir Görünüm oluşturdum. Alanlar başka bir alana göre gruplanır (alanın kimliği). İşaret şu şekilde görünür:

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

Ancak, böyle bakmak için işarete ihtiyacım var:

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

Görünümü görüntülemek için views-view-unformatted.tpl.php (Stil Çıktısı) özelliğini kullanabileceğinizi ve ardından grubu sarmak için bir DIV yerleştirebileceğinizi biliyorum.

Ancak, sarıcı DIV'imin böyle olması gerekiyor <div id="term_ID_{number of ID}">. Sayı kimliği, alanları gruplamak için kullanılan terime karşılık gelir. Varsayılan olarak, views-view-unformatted.tpl.php kullanıyorsanız, terim kimlikleri için belirteçler ekleyemezsiniz.

Herhangi bir yardım takdir edilecektir.

Yanıtlar:


50

Son zamanlarda aynı şeyi yapmam gerekiyordu. Bir şablon dosyası oluşturabilirsiniz:

  • Altındaki şablonu bulun /modules/views/themes/views-view-unformatted.tpl.php.
  • Senin içine kopyalayın /sites/all/themes/<your-theme>için klasöre ve yeniden adlandırma views-view-unformatted--<nodetype>.tpl.php.
  • divTüm şablonun etrafına bir ekleyerek dosyayı düzenleyin. <h3>Etiket grup adıdır.

Değiştirilen şablon dosyası neye benzeyebilir.

<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
Bu sadece ta benim için çok çalıştı muchly :)
Clive

Zaman dostumu kurtardın!
DropDragon

1
Bu cevabı okuyan herkes, tpldosyalarında neyin isimlendirileceğini merak eden için , buradaki cevaba bakınız drupal.stackexchange.com/questions/11468/… tldr; görünüm düzenleme sayfanızda, gelişmişin altında, temaya tıklayın: bilgi
user56reinstatemonica8

Q ve A Drupal 7 olsa da, Drupal 8 için de aynı işler.
Duncanmoo

16

Biçimi deneyin: HTML listesi. Bu her şeyi bir eşya listesine saracak. Amacım için mükemmel (taksonomi maddelerinin bir listesi). Bu yardımcı olur umarım.


Bu iyi. Grup alanını paketleyiciye bir sınıf olarak eklemek istedim, böylece buna göre stil oluşturabiliyorum, ancak UI'nın kendisinde böyle görünmüyor. Bunun yerine, birinin yardımcı olması durumunda yaptığım şey: Önce o alana göre SIRALAYIN, sonra css ilk seçicisini kullan.
klidifia

11

Sonuçları yeniden yazma özelliğini denediniz mi? Düzenlemek istediğiniz alanı tıklayın ve sonuçları yeniden yazana kadar aşağı kaydırın . Bu alanın çıktısını yeniden yaz onay kutusunu işaretleyin ve ardından HTML'yi gerektiği gibi özelleştirin. Belirteçler için, metin giriş alanının altındaki kutuda gösterilen Değiştirme Desenlerini kullanabilirsiniz .

Değiştirme Kalıpları ile ilgili olarak, Görünümlerin görüntülediği uyarıyı not edin:

İşleme sırasından dolayı, bu alandan sonra gelen alanları kullanamayacağınızı unutmayın; Burada listelenmemiş bir alana ihtiyacınız varsa, alanlarınızı yeniden düzenleyin.

Bu yeterli değilse, Global: Custom text adlı yeni bir alan eklemeyi deneyin . Bu, bazı isteğe bağlı HTML'ler eklemenize izin verir ve Değiştirme Modelleri burada da mevcuttur. İki ayrı Genel kullanabilirsiniz :<div> Başlangıç ​​ve bitiş etiketlerini eklemek için özel metin alanları .


Merhaba, yardımınız için teşekkürler. Gruplandırma alanını değiştirmeye çalışıyorum (Sayfa: Stil seçenekleri> Gruplama alanı No.1) altında Bu gruplandırma alanının çıktısını değiştirmek için herhangi bir seçenek bulunmuyor. Kullanımı Global: Custom text, grubun içindeki satırı etkiler ancak grubun dışına değil,
big_smile

Gruplandırma alanı Nr.1'i seçtiğinizde , satırları ve Satır sınıfını gruplandırmak için İşlenmiş çıktıyı kullan seçenekleri vardır . Bunlardan hiçbiri istediğini yapmaz mı?
Patrick Kenny

1
Merhaba, yardımınız için teşekkürler. Bu seçenekler, tüm grubun tersine ayrı ayrı alanların etrafına sarmalayıcı DIvs ekler (bu, Gruplama alanı Nr.1 ​​tarafından oluşturulur).
big_smile

@PatrickKenny Bu yöntemin görünümün oluşturma süresi üzerinde kötü bir etkisi olup olmadığını biliyor musunuz?
user5950 11:13

@ user5950 Her zaman yeniden yazma sonuçlarını kullanırım ama hiçbir zaman performans artışı fark etmedim. İlişki ekleme gibi diğer genel görünüm görevlerinin, Sonuçları Yeniden Yazma işleminden önce performansı engellemesinin daha muhtemel olduğunu düşünüyorum.
Patrick Kenny,

5

Bugünlerde aynı sorunu yaşadım. Grup sarıcısının yanında ihtiyacım olan şey, grup başına ilk / son gibi bir css sınıfıydı.

Böylece views-view-unformatted.tpl.php dosyasına şu php kodunu ekledim:

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

İşte sarıcı ve sınıflar ile html kısmı:

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

Çıktı:

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

Yardımcı olabilirsiniz - tadını çıkarın


3

Bu yüzden sanırım en büyük bilmece, h3 etiketleri içindeki $ title değerini kullanarak sınıfı nasıl oluşturacağımızdır. Harf çevirisi modülünü ve aşağıdaki pasajı deneyeceğim:

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

Bu, bir görünüm içinde adlandırılmış çapa yapmak zorunda kaldığımda benim için çalıştı.


2

Çok faydalı - Izgara tabanlı bir düzen için bazı alfa / omega sınıflarına eklemem gerekiyordu ve hatta her iki satır için de temizleyebilmem için biraz garip davranıyordum. Satırı şu şekilde düzenledim:

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

buna:

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

Gerekli çıktıyı verir.



2

Bugün de benzer bir sorun yaşadım, ancak html sarmalayıcıda belirli bir sınıfa ihtiyacım vardı, benim durumumda görünüm taksonomi terimlerine göre gruplandırıldı ve her terim için belirli bir stile, yani terim için belirli bir sınıfa ihtiyacımız var. Görünüm biçimlendirilmemiş şablonunu şu şekilde değiştirdik:

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

Görünüşe göre taksonomi terimi alanın gösterimi şöyledir: "Varlık kimliğini göster". Böylece kimliği sınıf adının bir parçası olarak alırız ve ardından aynı kimliği temel alarak başlığı yükleriz.


2

Kod içine dalmak ve şablonlarla uğraşmak istemeyen herkes için, Fences'i kullanarak varsayılan div sınıflarını söküp ve basit dize formatını kullanarak alanın ön ekine ve sonekine kendi div'inizi ekleyerek bunu yapmanın kolay bir yolu var . Birden fazla alanınız varsa, içeren div'i ilk alanın ön ekine ve son alanın son ekine ekleyin.

Bu nedenle, ön ek ve son eki alanları ile eksiz alanları içeren yerel yapı şuna benzer:

<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" sınıfını ekleyecekseniz, olur

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

2

Yukarıdaki chrisjlee'nin cevabı, şablon dosyasına ne ad vereceğinin haricinde bunu iyi açıklıyor. Yalnızca bir görünümü değiştirmek istiyorsanız, yeni dosya görünümün makine adını içermelidir. Bunu, görünümün düzenleme sayfasının URL'sinde bulabilirsiniz. Benzer bir konuda bu yorumda çok iyi açıklanmıştır: https://www.drupal.org/node/1383696#comment-6729128

$ Title değerini kullanarak satırların etrafında bir sınıfa ihtiyacım vardı, böylece 2 sütunda onları oluşturabilirdim. İşte 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-->

2

Benzer bir konu ile karşılaştım. Gruplandırılmış satırlarımın önyükleme akordeonunda gösterilmesini istedim. Views Bootstrap modülüyle çalışmasını sağlayamazdım .
Yorum # 4 sorunumu çözdü.
İşte benim views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpgörünüşüm nasıl

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

Tabii ki, akordeonun çalışması için, aynı zamanda sahip olmak için views-view- [my_view_name] - [my_display_name] .tpl.php dosyasını düzenlemeniz gerekir.

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

Varsayılan kodu html yorumlarının arasında modülden bıraktım.
Umarım yardımcı olur.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.