티스토리 뷰
출처: https://ifuwanna.tistory.com/200
타임리프(Thymeleaf) 템플릿에서는 for문 while 등과 유사한 반복(iteration) 처리를 위해 th:each 를 사용 합니다.
루프 처리 중 상태를 추적하는 데 유용한 메커니즘인 status 변수가 제공되어 index, count 등을 쉽게 얻을 수도 있습니다.
다만 loop를 원천적으로 break를 하거나 반복처리를 하면서 어떤 값을 더해 다른 곳에서 사용하는 것이 불가하는 등 제약사항들이 있지만 우리는 Thymeleaf가 view Template engine이라는걸 명심해야 합니다!
JSTL등 에서 처리하듯이 Business logic을 view에 녹이는 것은 지양 해야하며 이런 비즈니스로직이 들어가는 부분은 서버에서 처리한 뒤 view Template 에서는 완성된 데이터를 "보여주는 것" 에 집중하는게 바람직하겠습니다.
th:each
반복 하려는 html 엘리먼트에 th:each 속성을 사용하여 콜렉션(Collection) 을 반복하며 화면을 처리 할 수 있습니다.
/* Entity Class */ public class Product{ private int seq; private String name; private int price; private int quantity; } /* Java Controller */ @RequestMapping(value = "/thymeleaf/iteration", method = { RequestMethod.POST, RequestMethod.GET }) public String Thymeleaf(Model model){ List<Product> productList = new ArrayList<>(); // constructor >> seq, name, price, quantity productList.add(new Product(1,"사과",1000,10)); productList.add(new Product(2,"배",2000,16)); productList.add(new Product(3,"초콜릿",1000,3)); productList.add(new Product(4,"치킨",15000,1)); //add data to view model.addAttribute("productList",productList); return "thymeleaf/iteration"; } <!-- html (Thymeleaf) --> <table class="tb_col"> <tr> <th>seq</th> <th>name</th> <th>price</th> <th>quantity</th> </tr> <tr th:each="product : ${productList}"> <td th:text="${product.seq}"></td> <td th:text="${product.name}"></td> <td th:text="${product.price}"></td> <td th:text="${product.quantity}"></td> </tr> </table>
▼▼▼▼▼ 결과(HTML)▼▼▼▼▼
<table class="tb_col"> <tr> <th>seq</th> <th>name</th> <th>price</th> <th>quantity</th> </tr> <tr> <td>1</td> <td>사과</td> <td>1000</td> <td>10</td> </tr> <tr> <td>2</td> <td>배</td> <td>2000</td> <td>16</td> </tr> <tr> <td>3</td> <td>초콜릿</td> <td>1000</td> <td>3</td> </tr> <tr> <td>4</td> <td>치킨</td> <td>15000</td> <td>1</td> </tr> </table>
'Skill > html js css' 카테고리의 다른 글
[CSS] 웹페이지 프린팅 (0) | 2022.10.14 |
---|---|
css !important (0) | 2022.10.12 |
[Tymeleaf] javascript inlining (0) | 2022.10.12 |
웹메일 css (0) | 2022.10.11 |
javascript reduce() (0) | 2022.10.11 |
- Total
- Today
- Yesterday
- lombok
- DatePicker
- CSS
- 프로젝트명변경
- $.each
- PostgreSQL
- springboot
- @ExceptionHandler
- object key
- JQuery
- draw.io
- setter
- sumifs
- ul li로 테이블
- oracle
- element위치
- Keycode
- 진열사랑
- $.extend
- caniuse
- 여러 컬럼 update
- devtools
- 정규식
- 전후방탐색
- excel
- QueryDSL
- border-collapse
- Javascript
- spring
- getter
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |