Question

我想连续写下4列

<div class="row">
   <div class="span3">Something</div>
   <div class="span3">Something</div>
   <div class="span3">Something</div>
   <div class="span3">Something</div>
</div>
<div class="row">
   <div class="span3">Something</div>
   <div class="span3">Something</div>
   <div class="span3">Something</div>
   <div class="span3">Something</div>
</div>

数据大小是动态的，因此它可以是4,8或更多。这是在其他模板引擎中存档的

{{#each list}}
  {{#if @index % 4 == 0}}
    <div class="row">
  {{/if}}
  <div class="span3">{{this.name}}</div>
  {{#if @index % 4 == 0}}
    </div>
  {{/if}}
{{/each}}

但我如何在百里香中存档？我无法找到方法，因为th:each位于代码（<div class="row">或<div class="span3">）中作为属性。

Answer 1

型号代码

List<String> data = new ArrayList<String>();
data.add("1");
data.add("2");
data.add("3");
data.add("4");
data.add("5");
data.add("6");
data.add("7");
data.add("8");

model.addAttribute("datas", data);

Thymeleaf查看代码

<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.current} % 4 == 0" class="span3">
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span>
</div>

结果

<div class="span3">
    <span>1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="span3">
    <span>5</span><span>6</span><span>7</span><span>8</span>
</div>

我使用数组来解决这个问题。我想你会找到一个更好的方法。

Answer 2

我刚在这里创建了一个帐户来纠正接受的答案。只要传入的“数据”是连续整数数组，接受的答案就会很好。但是，要使其适用于任何类型的数据结构，“row.current”需要更改为“row.count”，如下所示：

<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.count} % 4 == 0" class="span3">
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span>
</div>

如果您使用row.current，那么它会使用列表中的实际项目，这在所示示例中非常好，但对于任何其他类型的数据结构都不是很好。希望这会有所帮助。

编辑：

我必须进一步改进这一点，因为如果列表中的项目数不能被4整除，则接受的答案也不起作用。这是一个更好的（尽管可能不完美）解决方案：

<div th:each="data, row: ${datas}" th:with="numList=${ {3,2,1,0} }" th:if="${row.count % 4 == 0 or row.last}" class="span3">
    <!-- Show all rows except the leftovers -->
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.count % 4 == 0}" th:text="${datas[dataIndex]}">data</span>
    <!-- Show the remainders (eg, if there are 9 items, the last row will have one item in it) -->
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.last} and ${row.count % 4 != 0} and ${num &lt; row.count % 4}" th:text="${datas[dataIndex]}">data</span>
</div>

这可能会被重构以消除其中一个跨度，但我现在必须继续前进。

Answer 3

这也可以使用numbers.sequence来完成。将colCount设置为您想要的任意数量的列：

<th:block th:with="colCount=${4}">
    <div th:each="r : ${#numbers.sequence(0, datas.size(), colCount)}"  class="row">
        <div th:each="c : ${#numbers.sequence(0, colCount - 1)}" th:if="${r + c &lt; datas.size()}" th:text="${datas.get(r + c)}" class="span3"></div>
    </div>
</th:block>

Answer 4

：每个基本上都可以用在任何元素上。所以像这样：

<div class="row" th:each="row : ${rows}">
   <div class="span3" th:each="name : ${row.names}" th:text="${name}">Something</div>
</div>

Answer 5

 <div class="row" th:each="museum,step : ${museums}">
        <span th:if="${step.index % 2 == 0}">
             <div  class="column" style="background-color:#aaa;" >
            <h2  th:text="'Name: ' + ${museum.name}"></h2>
            <p th:text="'Address: ' + ${museum.address}"></p>
            <p th:text="'Capacity: ' + ${museum.capacity}"></p>
            </div>
        </span>
        <span th:if="${step.index < 3 and step.index %2 == 0} ">
            <div  class="column" style="background-color:#bbb;">
            <h2  th:text="'Name: ' + ${museums[step.index+1].name}"></h2>
            <p th:text="'Address: ' + ${museums[step.index+1].address}"></p>
            <p th:text="'Capacity: ' + ${museums[step.index+1].capacity}"></p>
        </div>
        </span>


    </div>

这就是我解决问题的方式。使用简单的奇数或偶数技巧

在thymeleaf，怎么写：每个组合行和列？

5 个答案: