ビュー-グループの周りにラッパーDIVを追加します


43

Drupal 7では、いくつかのフィールドをリストするビューを作成しました。フィールドは別のフィールド(フィールドの用語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(スタイル出力)を使用してビューを上書きし、DIVを挿入してグループをラップできることを知っています。

ただし、ラッパーDIVはこのようにする必要があります <div id="term_ID_{number of ID}">。番号IDは、フィールドのグループ化に使用された用語に対応します。デフォルトでは、views-view-unformatted.tpl.phpを使用する場合、用語IDのトークンを挿入することはできません。

任意の助けをいただければ幸いです。

回答:


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でも同じです
。-ダンカンムー

16

Format:HTMLリストを試してください。これにより、項目リストですべてがラップされます。私の目的には完璧です(分類項目のリスト)。お役に立てれば。


これはいい。グループフィールドをラッパーのクラスとして追加したかったので、それに応じてスタイルを設定できますが、ビューUI自体ではスタイルを設定できないようです。それが誰かを助ける場合、代わりに私がやったことは、最初にそのフィールドでSORTし、次にCSSファーストセレクターを使用します。
クリディフィア

11

結果書き換え機能を試しましたか?編集するフィールドをクリックし、[ 結果の書き換え]が表示されるまで下にスクロールします。[ このフィールドの出力書き換える]チェックボックスをオンにして、必要に応じてHTMLをカスタマイズします。トークンには、テキスト入力領域の下のボックスに表示されている置換パターンを使用できます。

置換パターンについては、ビューに表示される警告に注意してください。

レンダリングの順序により、このフィールドの後に続くフィールドは使用できないことに注意してください。ここにリストされていないフィールドが必要な場合は、フィールドを並べ替えます。

これで十分でない場合は、新しいフィールドGlobal:Custom textを追加してみてください。これにより、任意のHTMLを追加でき、置換パターンもここで利用できます。2つの個別のグローバル:カスタムテキストフィールドを使用して、<div>開始タグと終了タグを追加できます。


こんにちは、ご協力ありがとうございます。グループ化フィールドを変更しようとしています(ページ:スタイルオプション>グループ化フィールドNr.1の下)このグループ化フィールドの出力を変更するオプションはないようです。使用するとGlobal: Custom text、グループ内の行に影響しますが、グループの外部には影響しません
。– big_smile

[ グループ化フィールドNr.1]を選択すると、[ レンダリング出力を使用して行をグループ化する]および[ 行クラス]のオプションがあります。それらのどちらもあなたが望むものをしませんか?
パトリックケニー

1
こんにちは、ご協力ありがとうございます。これらのオプションは、グループ全体(グループ化フィールドNr.1によって作成される)ではなく、個々のフィールドの周りにラッパーDIvを追加するだけです。
big_smile

@PatrickKennyこのメソッドがビューのレンダリング時間に悪影響を与えるかどうか知っていますか?
user5950

@ user5950常にリライト結果を使用しますが、パフォーマンスの低下に気付いたことはありません。リレーションシップの追加など、他の一般的なビュータスクは、結果の書き換え前にパフォーマンスを妨げる可能性が高いと思います。
パトリックケニー

5

最近、私は同じ問題に遭遇しました。そして、グループラッパーの横に必要なのは、グループごとのfirst / lastのような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

したがって、最大の謎は、h3タグ内の$ titleの値を使用してクラスを生成する方法です。翻字モジュールと次のスニペットを試してみます。

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

ビューでは、分類用語フィールドの表示は「エンティティIDの表示」に設定されます。したがって、クラス名の一部としてIDを取得し、同じIDに基づいてタイトルをロードします。


2

コードに飛び込んでテンプレートを使いたくない場合は、Fencesを使用してデフォルトのdivクラスを削除し、Simple field formatterを使用してフィールドのプレフィックスとサフィックスに独自のdivを追加することにより、これを簡単に行うことができます。複数のフィールドがある場合は、最初のフィールドのプレフィックスと最後のフィールドのサフィックスに含まれる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からの回答は、テンプレートファイルに何を付けるかを除いて、うまく説明しています。1つのビューのみを変更する場合は、新しいファイルにビューのマシン名を含める必要があります。これは、ビューの編集ページのURLで見つけることができます。同様の問題に関するこのコメントで非常によく説明されていますhttps : //www.drupal.org/node/1383696#comment-6729128

2列でレンダリングできるように、$ titleの値を使用する行のクラスが必要でした。コードは次のとおりです。

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

同様の問題に遭遇しました。グループ化した行をブートストラップアコーディオン内に表示したかったのです。Views Bootstrapモジュールで動作させることはできませんでした。
コメント#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コメントの間にモジュールのデフォルトコードを残しました。
それが役に立てば幸い。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.