视图-在组周围添加包装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的标记。

任何帮助,将不胜感激。

Answers:


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
这对我也很起作用,::
Clive

你救了我的时间哥们!
DropDragon 2015年

1
对于任何人阅读这个答案不知道如何制定出什么来命名他们的tpl文件,一看便知这里 drupal.stackexchange.com/questions/11468/... tldr; 在您的视图编辑页面中的“高级”下,单击主题:信息
user56reinstatemonica8 '16

尽管Q和A是Drupal 7,但Drupal 8的工作相同
。– Duncanmoo

16

尝试使用Format:HTML列表。这会将整个内容包装在一个项目列表中。对我来说,它是完美的(分类项目列表)。希望这可以帮助。


很好 我想将group字段作为类添加到包装器上,以便我可以相应地设置样式,但似乎不能在Views UI本身中进行设置。如果对某人有所帮助,我所做的就是:首先通过该字段对SORT进行排序,然后使用css first选择器。
klidifia

11

您是否尝试过“ 重写结果”功能?单击要编辑的字段,然后向下滚动,直到看到“ 重写结果”。选中“ 重写此字段的输出 ”复选框,然后根据需要自定义HTML。对于令牌,可以使用文本输入区域下方框中显示的替换样式

关于“ 替换模式”,请注意“视图”显示的警告:

请注意,由于渲染顺序的原因,您不能使用此字段之后的字段。如果需要此处未列出的字段,请重新排列您的字段。

如果这还不够,请尝试添加新字段Global:Custom text。这将允许您添加一些任意的HTML,并且此处也提供了替换模式。您可以使用两个单独的全局:自定义文本字段来添加<div>开始和结束标签。


您好,谢谢您的帮助。我正在尝试更改分组字段(在页面:样式选项>分组字段Nr.1下)似乎没有任何选项可以更改此分组字段的输出。使用Global: Custom text效果组中的行,而不是组外的行,
big_smile 2012年

选择“ 分组字段” Nr.1时,有“ 使用渲染的输出对行行类进行分组”的选项。这些都不是您想要的吗?
帕特里克·肯尼

1
您好,谢谢您的帮助。这些选项仅将包装器DIv添加到各个字段周围,而不是整个组(由分组字段Nr.1创建)。
big_smile 2012年

@PatrickKenny您知道此方法是否会对视图的渲染时间产生不良影响吗?
user5950 2013年

@ user5950我一直都在使用重写结果,但是我从未注意到性能下降。我认为其他常见的视图任务(如添加关系)在重写结果之前更可能会影响性能。
帕特里克·肯尼

5

这些天,我遇到了同样的问题。在组包装器旁边,我需要一个css类,例如每个组的first / last。

所以我在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

非常有用-我需要为基于网格的布局添加一些alpha / omega类,甚至还需要添加一些奇数才能清除每一行的内容。我从以下位置编辑了该行:

$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的答案很好地解释了这一点,除了为模板文件命名之外。如果只想更改一个视图,则新文件必须包含视图的计算机名。您可以在视图的编辑页面的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注释之间从模块中保留了默认代码。
希望能帮助到你。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.