Thymeleaf中多个div的条件布局

Question

我正在用Thymleaf中的th:each格式化这个div结构。 所需的html格式如下

所需的HTML

<div class="row interest-featured"> <!--Parent Div -->
   <div class="col-md-4 interest">
   </div>
   <div class="col-md-4 interest">
   </div>
   <div class="col-md-4 interest">
   </div>
   <div class="col-md-4 interest">
   </div>
</div>
<div class="row interest-featured"> <!--Parent Div -->
   <div class="col-md-4 interest">
   </div>
   <div class="col-md-4 interest">
   </div>
   <div class="col-md-4 interest">
   </div>
   <div class="col-md-4 interest">
   </div>
</div>

到现在为止

<div th:each="interest,status : ${interest}" th:class="${(status.index + 1 % 3) == 0}? 'row interest-featured' :''">
   <div class="col-md-4 interest">
   </div>
</div>

任何帮助将不胜感激。 谢谢

PS：为简洁起见，删除了HTML文本

Answer 1

我想我明白这里的问题。 如果您有一个平面列表，并且想要将其显示在Bootstrap网格中，则必须为每n个元素创建一个新行。

解决此问题的方法并不像普通的th:each那样干净，但是您必须两次使用它，并在要显示它时使用正确的th:if语句。

例如，对于.row元素，您只希望对索引为.row元素显示（如果要使用第1/3列网格）。 这意味着您应该：

<div th:each="interest,rowStatus : ${interests}" class="row interest-featured" th:if="${rowStatus.index % 3} == 0">
</div>

现在，对于该行的子级，您将不得不再次遍历集合，但是对其进行过滤，以便对于第一行，您仅显示索引为0-2的元素，第二行显示3-5，...的元素。 。

为此，请使用另一个th:if ：

<div th:each="interest,rowStatus : ${interests}" class="row interest-featured" th:if="${rowStatus.index % 3} == 0">
    <div th:each="interest,interestStatus : ${interests}" class="col-md-4 interest" th:text="${interest}"
         th:if="${interestStatus.index lt rowStatus.index + 3 and interestStatus.index ge rowStatus.index}"></div>
  </div>

---

如果您不想使用此类繁琐的模板，则始终可以仅遍历该列本身。 如果您使用的是Bootstrap，它将自动创建新行中不适合的列，例如：

<div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
    <div class="col-md-4">Column 4</div><!-- This item will be on a new row because the grid does only allow 12 spaces -->
</div>

但是，当列的内容高度可变时，两种方法之间存在一些差异。

---

注意 ：您还将两次使用interest变量。 该集合名为${interest} ，但结果变量也称为interest 。 您可能必须重命名其中之一。

Answer 2

您使用对象。

HTML

<div class="source_list" th:each="history : ${historys}">
        <label>date : <span th:text="${history.date}">2016.06.27</span></label>
        <br /> 

        <label>description : </label><span th:text="${history.description}">2016.06.27</span>

        <br /> <br />
</div>

contorller

@RequestMapping(value = "/settings/history/{companyIdx}")
public ModelAndView showHistory(ModelAndView mav, @PathVariable int companyIdx, HttpServletRequest request) {
    String language = CookieUtil.getCookieValue(request, "lang");
    Company company = companyService.findCompanyByIdx(companyIdx);

    List<CompanyHistory> historys = companyService.findHistoryByLanguage(company, language);


    mav.addObject("company", company);
    mav.addObject("historys", historys);

    mav.setViewName("/company/company_settings_history");

    return mav;
}

DTO

@Entity(name = "company_history")
public class CompanyHistory {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int idx;

    @ManyToOne
    @JoinColumn(name = "company_id")
    private Company company;

    private String date;

    private String description;

    ...
}