Views - เพิ่ม wrapper 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 คุณจะไม่สามารถแทรกโทเค็นสำหรับรหัสคำศัพท์ในนั้น

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม

คำตอบ:


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 ที่จะห่อสิ่งทั้งหมดในรายการ - รายการ สำหรับวัตถุประสงค์ของฉันมันสมบูรณ์แบบ (รายการของรายการ taxonomy) หวังว่านี่จะช่วยได้


ดีจัง. ฉันต้องการเพิ่มเขตข้อมูลกลุ่มเป็นคลาสบน wrapper ดังนั้นฉันจึงสามารถจัดสไตล์ได้ตามต้องการ แต่ดูเหมือนจะไม่สามารถทำได้ใน UI ของมุมมอง สิ่งที่ฉันทำไปแล้วถ้ามันช่วยใครบางคนคือ: เรียงลำดับตามฟิลด์นั้นก่อนอื่นจากนั้นใช้ css ตัวเลือกแรก
klidifia

11

คุณลองใช้คุณสมบัติผลลัพธ์การเขียนซ้ำหรือไม่ คลิกที่ฟิลด์ที่คุณต้องการแก้ไขและเลื่อนลงจนกว่าคุณจะเห็นผลลัพธ์การเขียนซ้ำ ทำเครื่องหมายที่ช่องเพื่อเขียนซ้ำเอาต์พุตของฟิลด์นี้จากนั้นปรับแต่ง HTML ตามความจำเป็น สำหรับโทเค็นคุณสามารถใช้รูปแบบการเปลี่ยนที่แสดงในกล่องด้านล่างพื้นที่ป้อนข้อความ

เกี่ยวกับรูปแบบการเปลี่ยนโปรดสังเกตคำเตือนที่ Views แสดง:

โปรดทราบว่าเนื่องจากลำดับการแสดงผลคุณไม่สามารถใช้ฟิลด์ที่อยู่หลังฟิลด์นี้ หากคุณต้องการฟิลด์ที่ไม่อยู่ในรายการนี้ให้จัดเรียงฟิลด์ของคุณใหม่

ถ้าไม่พอลองเพิ่มสาขาใหม่ทั่วโลก: ข้อความที่กำหนดเอง สิ่งนี้จะช่วยให้คุณสามารถเพิ่ม HTML ที่กำหนดเองและรูปแบบการแทนที่ได้ที่นี่เช่นกัน คุณสามารถใช้สองโกลบอลแยกต่างหาก:ฟิลด์ข้อความที่กำหนดเองเพื่อเพิ่ม<div>แท็กเริ่มต้นและแท็กสิ้นสุด


สวัสดีขอบคุณสำหรับความช่วยเหลือของคุณ ฉันกำลังพยายามเปลี่ยนฟิลด์การจัดกลุ่ม (ภายใต้หน้า: ตัวเลือกสไตล์> ฟิลด์การจัดกลุ่ม Nr.1) ดูเหมือนจะไม่มีตัวเลือกใด ๆ ในการแก้ไขเอาต์พุตของฟิลด์การจัดกลุ่มนี้ การใช้เอGlobal: Custom textฟเฟกต์แถวภายในกลุ่ม แต่ไม่ใช่ด้านนอกของกลุ่ม
big_smile

เมื่อคุณเลือกจัดกลุ่มข้อมูล Nr.1มีตัวเลือกสำหรับการใช้งานการส่งออกให้แก่กลุ่มแถวและระดับแถว คุณไม่ต้องการสิ่งเหล่านี้
Patrick Kenny

1
สวัสดีขอบคุณสำหรับความช่วยเหลือของคุณ ตัวเลือกเหล่านั้นเพียงเพิ่ม wrapper DIvs รอบ ๆ แต่ละเขตข้อมูลซึ่งตรงข้ามกับกลุ่มทั้งหมด (ที่สร้างโดยการจัดกลุ่มเขตข้อมูล Nr.1)
big_smile

@PatrickKenny คุณรู้หรือไม่ว่าวิธีนี้มีผลกระทบต่อเวลาในการแสดงผลของมุมมองหรือไม่?
user5950

@ user5950 ฉันใช้ผลการเขียนซ้ำตลอดเวลา แต่ฉันไม่เคยสังเกตเห็นการตีประสิทธิภาพ ฉันคิดว่างานมุมมองทั่วไปอื่น ๆ เช่นการเพิ่มความสัมพันธ์มีแนวโน้มที่จะขัดขวางประสิทธิภาพก่อนที่ Rewrite Results จะทำได้
Patrick Kenny

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 ที่มี wrapper และคลาส:

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

ในมุมมองการแสดงฟิลด์คำศัพท์อนุกรมวิธานถูกกำหนดเป็น: "แสดงรหัสเอนทิตี" ดังนั้นเราจึงได้รับ ID เป็นส่วนหนึ่งของชื่อชั้นแล้วโหลดชื่อตามรหัสเดียวกัน


2

สำหรับใครที่ไม่ต้องการที่จะดำน้ำในรหัสและระเบียบเกี่ยวกับแม่แบบมีวิธีที่ง่ายต่อการทำเช่นนี้โดยการลอกเรียน div เริ่มต้นโดยใช้รั้วและการเพิ่ม 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 ด้านบนอธิบายได้ดียกเว้นชื่อไฟล์เทมเพลต หากคุณต้องการเปลี่ยนเพียงมุมมองเดียวไฟล์ใหม่จะต้องมีชื่อเครื่องของมุมมอง คุณสามารถค้นหาได้ใน 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

ฉันเจอปัญหาที่คล้ายกัน ฉันต้องการให้แถวที่จัดกลุ่มของฉันแสดงภายในหีบเพลงบูตสแตรป ฉันไม่สามารถทำงานร่วมกับโมดูล 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.