Lượt xem - Thêm trình bao bọc DIV xung quanh Nhóm


43

Trong Drupal 7, tôi đã tạo Chế độ xem liệt kê một số trường. Các trường được nhóm theo một trường khác (ID thuật ngữ của trường). Dấu hiệu trông như thế này:

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

Tuy nhiên, tôi cần đánh dấu để trông như thế này:

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

Tôi biết rằng bạn có thể sử dụng view-view-unformatted.tpl.php (Kiểu đầu ra) để vượt qua chế độ xem và sau đó chèn DIV để bọc nhóm.

Tuy nhiên, tôi cần DIV của tôi để được như thế này <div id="term_ID_{number of ID}">. ID số sẽ tương ứng với thuật ngữ đã được sử dụng để nhóm các trường. Theo mặc định, nếu bạn sử dụng view-view-unformatted.tpl.php, bạn không thể chèn mã thông báo cho ID thuật ngữ vào nó.

Bất kỳ trợ giúp sẽ được đánh giá cao.

Câu trả lời:


50

Tôi cần phải làm điều này gần đây. Bạn có thể tạo một tệp mẫu:

  • Tìm mẫu dưới /modules/views/themes/views-view-unformatted.tpl.php.
  • Sao chép nó vào /sites/all/themes/<your-theme>thư mục của bạn và đổi tên thành views-view-unformatted--<nodetype>.tpl.php.
  • Chỉnh sửa tập tin thêm một divxung quanh toàn bộ mẫu. Các <h3>từ khóa là tên nhóm.

Đây là những gì các tập tin mẫu sửa đổi có thể trông như thế nào.

<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
Điều này chỉ làm việc cho tôi quá, tôi rất nhiều :)
Clive

Bạn đã tiết kiệm thời gian của tôi bạn!
DropDragon

1
Đối với bất cứ ai đọc câu trả lời này tự hỏi làm thế nào để tìm ra tên của tpltập tin của họ , hãy xem câu trả lời ở đây drupal.stackexchange.com/questions/11468/ trên tldr; trong trang chỉnh sửa chế độ xem của bạn, theo nâng cao, nhấp vào chủ đề: thông tin
user56reinstatemonica8

Mặc dù Q và A là Drupal 7, cùng hoạt động với Drupal 8.
Duncanmoo

16

Hãy thử Định dạng: danh sách HTML. Điều đó sẽ bao gồm toàn bộ trong một danh sách vật phẩm. Đối với mục đích của tôi, nó hoàn hảo (một danh sách các mục phân loại). Hi vọng điêu nay co ich.


Điều này là tốt Tôi muốn thêm trường nhóm dưới dạng một lớp trên trình bao bọc để tôi có thể tạo kiểu phù hợp nhưng dường như không thể làm điều đó trong giao diện UI. Thay vào đó, điều tôi đã làm nếu điều đó giúp được ai đó là: Trước tiên, hãy theo dõi trường đó, sau đó sử dụng bộ chọn css đầu tiên.
klidifia

11

Bạn đã thử tính năng Rewrite results chưa? Nhấp vào trường bạn muốn chỉnh sửa và cuộn xuống cho đến khi bạn thấy kết quả Viết lại . Chọn hộp để Viết lại đầu ra của trường này và sau đó tùy chỉnh HTML nếu cần. Đối với mã thông báo, bạn có thể sử dụng Mẫu thay thế được hiển thị trong hộp bên dưới khu vực nhập văn bản.

Về các Mẫu thay thế , hãy lưu ý cảnh báo mà Lượt xem hiển thị:

Lưu ý rằng do thứ tự kết xuất, bạn không thể sử dụng các trường nằm sau trường này; nếu bạn cần một trường không được liệt kê ở đây, hãy sắp xếp lại các trường của bạn.

Nếu điều này là không đủ, hãy thử thêm một trường mới, Toàn cầu: Văn bản tùy chỉnh . Điều này sẽ cho phép bạn thêm một số HTML tùy ý và các Mẫu thay thế cũng có sẵn ở đây. Bạn có thể sử dụng hai trường văn bản Toàn cầu: Tùy chỉnh riêng biệt để thêm thẻ <div>bắt đầu và kết thúc.


Chào, cám ơn bạn vì giúp đỡ. Tôi đang cố gắng thay đổi trường nhóm (trong Trang: Tùy chọn kiểu> Trường nhóm Nr.1) Dường như không có bất kỳ tùy chọn nào để thay đổi đầu ra của trường nhóm này. Sử dụng Global: Custom texthiệu ứng hàng trong nhóm nhưng không phải bên ngoài nhóm,
big_smile

Khi bạn chọn Nhóm nhóm Nr.1 , có các tùy chọn cho Sử dụng đầu ra được kết xuất cho các hàng nhómlớp Hàng . Không ai trong số họ làm những gì bạn muốn?
Patrick Kenny

1
Chào, cám ơn bạn vì giúp đỡ. Các tùy chọn đó chỉ cần thêm DIv của trình bao quanh các trường riêng lẻ trái ngược với toàn bộ nhóm (được tạo bởi trường Nhóm Nr.1).
big_smile

@PatrickKenny Bạn có biết phương pháp này có ảnh hưởng xấu đến thời gian kết xuất của chế độ xem không?
dùng5950

@ user5950 Tôi sử dụng viết lại kết quả mọi lúc nhưng tôi chưa bao giờ nhận thấy một cú đánh hiệu suất. Tôi nghĩ rằng các tác vụ xem phổ biến khác như thêm mối quan hệ có nhiều khả năng cản trở hiệu suất trước khi Kết quả Viết lại sẽ.
Patrick Kenny

5

Những ngày này tôi gặp vấn đề tương tự. Và thứ tôi cần bên cạnh trình bao bọc nhóm là một lớp css như đầu tiên / cuối cùng cho mỗi nhóm.

Vì vậy, tôi đã thêm vào view-view-unformatted.tpl.php mã php sau:

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

Ở đây phần html với trình bao bọc và các lớp:

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

Đầu ra sẽ là:

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

Có thể hữu ích - thưởng thức


3

Vì vậy, tôi đoán câu đố lớn nhất là làm thế nào để tạo lớp bằng cách sử dụng giá trị của tiêu đề $ trong các thẻ h3. Tôi sẽ thử mô-đun Chuyển ngữ và đoạn mã sau:

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

Điều này làm việc cho tôi khi tôi phải tạo ra các neo được đặt tên trong một khung nhìn.


2

Rất hữu ích - Tôi cần thêm vào một số lớp alpha / omega cho bố cục dựa trên lưới và một số lẻ thậm chí để có thể xóa cả hai cho mỗi hàng. Tôi đã chỉnh sửa dòng từ:

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

đến đây:

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

Cung cấp cho đầu ra cần thiết.



2

Tôi đã có một vấn đề tương tự ngày hôm nay, nhưng cần một lớp cụ thể trên html bao bọc, trong trường hợp của tôi, khung nhìn được nhóm theo các thuật ngữ phân loại và chúng tôi cần một kiểu cụ thể cho mỗi thuật ngữ, vì vậy một lớp cụ thể cho mỗi thuật ngữ. Dưới đây là cách chúng tôi thay đổi chế độ xem chưa được định dạng mẫu:

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

Theo quan điểm, màn hình của trường thuật ngữ phân loại được đặt thành: "Hiển thị id thực thể". Vì vậy, chúng tôi nhận id là một phần của tên lớp và sau đó tải tiêu đề dựa trên cùng một id.


2

Đối với bất kỳ ai không muốn đi sâu vào mã và lộn xộn với các mẫu, có một cách dễ dàng để làm điều này bằng cách tước các lớp div mặc định bằng Fences và thêm div của riêng bạn vào tiền tố và hậu tố của trường bằng cách sử dụng trình định dạng trường Đơn giản . Nếu bạn có nhiều trường, chỉ cần thêm div chứa trong tiền tố của trường đầu tiên và hậu tố của trường cuối cùng.

Vì vậy, cấu trúc gốc với các khu vực tiền tố và hậu tố không được đánh dấu sẽ trông giống như:

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

Nếu bạn định thêm lớp "foo" thì nó sẽ trở thành

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

2

Câu trả lời từ chrisjlee ở trên giải thích điều đó tốt ngoại trừ việc đặt tên tệp mẫu là gì. Nếu bạn chỉ muốn thay đổi một chế độ xem, tệp mới phải bao gồm tên máy của chế độ xem. Bạn có thể tìm thấy điều này trong url cho trang chỉnh sửa của chế độ xem. Nó được giải thích rất tốt trong bình luận này về một vấn đề tương tự: https://www.drupal.org/node/1383696#comment-6729128

Tôi cần một lớp xung quanh các hàng bằng cách sử dụng giá trị của $ title để tôi có thể kết xuất chúng trong 2 cột. Đây là mã:

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

Tôi đã gặp một vấn đề tương tự. Tôi muốn các hàng được nhóm của tôi hiển thị trong một hiệp ước bootstrap. Tôi không thể làm cho nó hoạt động với mô-đun Views Bootstrap .
Nhận xét số 4 đã giải quyết vấn đề của tôi.
Đây là những gì tôi views-view-unformatted-[my_view_name]-[my_display_name].tpl.phptrông

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

tất nhiên, để accordion hoạt động, bạn cũng cần chỉnh sửa view-view- [my_view_name] - [my_display_name] .tpl.php để có

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

Tôi để lại mã mặc định từ mô-đun giữa các bình luận html.
Hy vọng nó giúp.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.