* 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>
참고한 사이트
