7

我想像这样连续写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">）中作为属性。

4

5 回答 5

13

型号代码

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>

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

于 2013-08-01T06:24:52.900 回答
7

这也可以使用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>
于 2016-07-27T06:17:16.553 回答
4

我刚刚在这里创建了一个帐户来更正接受的答案。只要传入的“数据”是一个连续整数数组，接受的答案就很好。但是，要使其适用于任何类型的数据结构，“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>

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

于 2016-02-15T23:13:46.883 回答
3

th:each 基本上可以用于任何元素。所以是这样的：

<div class="row" th:each="row : ${rows}">
   <div class="span3" th:each="name : ${row.names}" th:text="${name}">Something</div>
</div>
于 2013-07-30T21:52:18.670 回答
0 
 <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>

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

于 2021-05-10T07:03:24.583 回答