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元素，您只想显示索引为0,3,6，...的元素（如果需要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;

    ...
}

Thymeleaf

2 个答案: