Spring Boot Thymeleaf - 将数据拆分为 2 列答案

【问题标题】：Spring Boot Thymeleaf - Split Data into 2 columnsSpring Boot Thymeleaf - 将数据拆分为 2 列
【发布时间】：2021-07-12 14:14:29
【问题描述】：

我正在使用 Spring Boot 2.5 和 Thymeleaf 3.0.12。我有一个字符串列表，我想在两列中显示。以下是我现在使用的代码 sn-p：

<div class="row">
    <div class="col-sm-6">
        <div class="form-check"  th:each="service : ${services}" th:if="${serviceStat.odd}">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_'+serviceStat.count}"/> 
            <label  class="form-check-label" th:text="${'myStr'+'_'+serviceStat.count}"></label>
        </div>
    </div>  
    <div class="col-sm-6">
        <div class="form-check" th:each="service : ${services}" th:if="${serviceStat.even}">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_'+serviceStat.count}"/> 
            <label  class="form-check-label" th:text="${'myStr'+'_'+serviceStat.count}"></label>
        </div>
    </div>
</div>

这按预期工作。

但是这种方法需要两次列表迭代。我怀疑我的列表是否很大，我的页面可能会变慢。有没有办法在单次迭代中达到同样的效果？

【问题讨论】：

为什么不使用 CSS 来创建列？
serviceStat 来自哪里？
@aksappy 它是变量、“服务”和后缀“统计”的聚合，将在 Thymeleaf 中自动可用
服务中的偶数/奇数统计是否为 1:1？如果是，col-sm-6 将自动将它们保留在两列中，并且只需要一个循环。
@aksappy 我没听懂你吗？怎么样？

标签： spring spring-boot thymeleaf

【解决方案1】：

我们可以在一个循环中做到这一点。诀窍是使用col-sm-6 div 执行th:each，引导程序将负责将它们对齐在两列中。 OP 恰好在 col-sm-6 div 中有 th:each。

<div class="row">
    <div class="col-sm-6" th:each="service : ${services}">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_'+serviceStat.count}"/>
            <label  class="form-check-label" th:text="${'myStr'+'_'+serviceStat.count}"></label>
        </div>
    </div>
</div>

注意 - col-sm-6 是小屏幕的断点。使用https://getbootstrap.com/docs/4.1/layout/grid/#grid-options 为您的要求选择正确的断点。

【讨论】：