Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

Thymeleaf 에서 자주 사용하는 예제 본문

Thymeleaf

Thymeleaf 에서 자주 사용하는 예제

날아올라↗↗ 2017. 12. 12. 12:57
728x90

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-에서-자주-사용하는-예제 [散策 의 정리공간]

728x90
저작자표시