Thymeleaf中多个div的条件布局

Question

I am struggling to format this div structure using th:each in Thymleaf. The desired html format is as follows

Desired 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>

Progress until now

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

Any help would be highly appreciated. Thanks

PS: HTML texts are removed for brevity

Answer 1

I think I understand the issue here. If you have a flat list and you want to display it in a Bootstrap grid, you'll have to create new rows for each n elements.

The solution to this problem isn't as clean as a normal th:each , but you'll have to use it twice and have proper th:if statements on when you want to display it.

For example, for the .row element, you want to only show it for elements with index 0, 3, 6, ... (if you want a 1/3th column grid). This means you should do:

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

Now, for the children of the row you'll have to iterate again over your collection, but filter it so that for the first row you only show elements with index 0-2 for the second row the elements 3-5, ... .

To do that you use another 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>

---

If you don't want to use a cumbersome template like this, you can always just iterate over the column itself. If you're using Bootstrap, it will automatically create columns that do not fit within a row on a new line, for example:

<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>

However, there are some differences between both approaches when the content of the column is variable in height.

---

NOTE : You're also using the interest variable twice. The collection is named ${interest} , but the result variable is also called interest . You probably have to rename one of those.

Answer 2

You use object.

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;

    ...
}