| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- 추상클래스
- 야구게임
- 업캐스팅
- 전체
- while
- 자바 야구게임
- 가변인자
- 이클립스
- 스프링
- full text indexing
- Validations
- IBatis procedure
- 상속예제
- 전체텍스트
- 다형성
- 자바
- 페이징
- jquery
- 25가지 효율적인 sql작성법
- 전자정부
- 다운캐스팅
- 형변환
- 단축키
- Login with OAuth Authentication
- angular2
- 상속
- 로또
- Random
- Full text
- Today
- Total
nalaolla
Thymeleaf 에서 자주 사용하는 예제 본문
Thymeleaf 에서 자주 사용하는 예제들을 정리해본다.
* Javascript 에서 비교 연산자
: Thymeleaf 에서 '<', '>' 태그를 엄격하게 검사하기 때문인지, 자바스크립트에서 사용시 [[CDATA]] 로 묶어줘야한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
...
<script type="text/javascript">
function checkLevel() {
var rate = $("#level").val();
/*<![CDATA[*/
if (rate > 100) {
alert("레벨은 100 이하의 숫자여야 합니다.");
return;
}
/*]]>*/
}
</body>
</html>
* if / else 문
: <tr>, th:each 로 테이블 형태의 데이터를 표시할때, 값의 존재 유무에 따라서 컬럼값을 다르게 표현할때
- if / unless 사용
<td th:if="${data.buyTime} != 0" th:text="${ddf.format(data.buyTime)}" ></td>
<td th:unless="${data.buyTime} != 0">0</td>
- ? 이항 연산자 사용
<td th:text="${data.buyTime} ? ${customformat(data.buyTime)} : '0'" ></td>
- switch / case 사용
<td th:switch="${data.type}" >
<span th:case="1" class="center-block label label-info">접속</span>
<span th:case="2" class="center-block label label-primary">레벌 업</span>
<span th:case="3" class="center-block label label-warning">만료</span>
</td>
* select 사용
: 컨트롤러에서 List<itemData> 를 생성해서 model.addAttribute("itemDatas", itemDataList) 형태로 전달하는 경우.
<div class="row">
<label class="label col col-2">아이템 정보</label>
<div class="col col-10">
<label class="select">
<select class="select" name="itemId" id="itemId">
<option value="0">ALL</option>
<option th:each="itemData : ${itemDatas}" th:value="${itemData.ItemId}" th:text="${itemData.itemId} + ' : ' + ${itemData.name}"></option>
</select><i></i>
</label>
</div>
</div>
: 컨트롤러에서 Map<Integer, String> 를 생성해서 model.addAttribute("itemDataMap", itemDataMap) 형태로 전달하는 경우.
<div class="row">
<label class="label col col-2">아이템 정보</label>
<div class="col col-10">
<label class="select">
<select class="select" name="itemId" id="itemId">
<option th:each="itemData : ${itemDataMap}" th:value="${itemData.key}" th:text="${itemData.key} + ' : ' + ${itemData.value}"></option>
</select><i></i>
</label>
...
: 컨트롤러에서 Map<Integer, ItemData> 를 생성해서 model.addAttribute("itemDataMap", itemDataMap) 형태로 전달하는 경우.
@Data
public class ItemData {
private int itemId;
private String name;
}
<div class="row">
<label class="label col col-2">아이템 정보</label>
<div class="col col-10">
<label class="select">
<select class="select" name="itemId" id="itemId">
<option th:each="itemData : ${itemDataMap}" th:value="${itemData.key}" th:text="${itemData.key} + ' : ' + ${itemData.value.name}"></option>
</select><i></i>
</label>
...
* table 사용
: 컨트롤러에서 Map<Integer, String> 를 생성해서 model.addAttribute("itemDataMap", itemDataMap) 형태로 전달하는 경우.
<tr th:if="${not #lists.isEmpty(datas)}" th:each="data : ${datas}">
<td>
<a data-toggle="modal" href="#dataModal" class="btn btn-xs btn-default" th:onclick="|javascript:changePopup('${data.seq}')|">
<i class="fa fa-times"></i>
</a>
</td>
<td th:text="${data.seq}" ></td>
<td th:text="${data.type}" ></td>
<td th:text="${data.itemId} + ':' + ${itemDataMap.get(data.itemId)}" ></td>
<td th:text="${data.text}" ></td>
</tr>
: itemDataMap.get(id) 의 결과값은 itemData 의 이름이나 다른 값(value) 가 되겠다.
* a href 사용
: <a> 로 다른 페이지로 이동할 경우
<td th:if="${data.num != 0}">
<a href="/user/list?id=" th:attrappend="href=${data.id}" th:text="${id.num}"></a>
</td>
: 파라미터가 여러개(multil) 일 경우
<td th:if="${data.num != 0}">
<a th:href="@{/user/list(id=${data.id},nick=${data.nick})}" th:text="${data.num}"></a>
</td>
참고한 사이트
http://www.thymeleaf.org/doc/articles/standardurlsyntax.html
출처: http://firstboos.tistory.com/entry/Thymeleaf-에서-자주-사용하는-예제 [散策 의 정리공간]