时间戳

首页 > 解决方案 > Thymeleaf 每 n 个元素开始新行

thymeleaf - Thymeleaf 每 n 个元素开始新行

问题描述

所以我正在尝试创建一个 Thymeleaf 循环，其中包含 n 个元素的列表。每四分之一（从第一个开始）我创建一个父元素，每个元素都被添加到该元素中，直到创建新的父元素。

所以这个想法是 

for e : elements {
   if index % 4 = 0 {
       create new parent
   }
   add e to parent
}

我正在尝试在 Thymeleaf 中实现这一点，但无法正常工作。这是我认为我得到的最接近的（内部循环导致“IllegalStateException：无索引”）：

             <div th:each="metric, rowStatus : ${metrics}"
                class="row tile_count" th:if="${rowStatus.index % 4} == 0">
                <div th:each="i: ${#numbers.sequence(rowStatus.index , rowStatus.index +4)}"
                   th:replace="layouts/template.html :: metricCard(name=${metrics[i].name}, value=${metrics[i].value},description=${metrics[i].description}, severity=${metrics[i].severity})"></div>
             </div>

所需的 html 是在球场上的东西：

  <div class="row tile_count">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total HR1 Files</span>
      <div class="count">17</div>
      <span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
      <div class="count green"> 7,353</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
      <div class="count">43 sec</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
      <div class="count">0</div>
      <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
      <div class="count">7,353</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>21% </i> From last Week</span>
    </div>
  </div>
  <div class="row tile_count">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total HR2 Files</span>
      <div class="count">05</div>
      <span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
      <div class="count green">5,421</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
      <div class="count">10 sec</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
    </div>

    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
      <div class="count">2</div>
      <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
      <div class="count">5,419</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
    </div>
  </div>

标签： thymeleaf

解决方案

你可以th:remove这样尝试：

<th:block th:each="metric, iterStat : ${metrics}">
<div class="row tile_count" th:remove="${iterStat.index % 4 == 0 ? none : tag}">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      ...
    </div>
</div>
</th:block>

推荐阅读