Preloader image
DDD

자바

타임리프(thymeleaf) - class, id, if, onClick, data-param 값에 적용 - 단어 + 변수 예제

작성자 관리자 (admin)
조회수 1,276
입력일 2023-05-24 08:28:14

-- html 그대로 출력|

<th:block th:utext="<span style='color:red;'>Color</span>"></th:block>
출력 : Color

-- href URL

<a th:href="@{/community_view(com_bbs_num=${row.com_bbs_num},mode=view)}" th:utext="${row.com_bbs_subject}"></a> 클릭 a Tag
<a th:href="@{'#num_' + ${bbs_view.com_bbs_num}}" th:utext="TOP"></a> #엥커

-- 타임 리프 class, id 값에 적용 - 단어 + 변수 예제

<th:block th:each="row : ${asia}">
  <tr>
    <th class="pc" th:text="${row.dps_num}"></th>
  </tr>
  <tr th:attr="class=${'tr_' + row.dps_num}">
    <td colspan="11" th:attr="class=${'open_class person_' + row.dps_num}"></td>
  </tr>
</th:block>

-- 조건에 따라 class 값을 변경

<span th:attr="class=${condition ? 'base condition-true' : 'base condition-false'}">
  조건에 따라 class 값을 변경

</span>

-- Javascript:OnClick

<div th:onclick="'clk_event1('+ ${item.menuid} + ')'">클릭</div>

-- Javascript

<script th:inline="javascript">

  let articleArray = new Array();
  let article = new Object();
  
  /*[# th:each="article : ${articleList}"]*/
  article.id =  /*<${article.id}>*/;
  article.title =  "[(${article.title)]"; // 한글이 유니코드로 출력되므로 주의 " 찍어줘야!
  article.content =  /*<${article.content}>*/;
  articleArray.push(article);
  /*[/]*/

</script>

-- data-param 적용

<span class="bi bi-zoom-in detail" th:data-num="${row.dps_num}"></span>

-- 문자열 자르기 (일자 만들기)

<td th:text="${#strings.substring(row.dps_reserve,0, 11)}"></td>

-- 단일 Object 출력

<th:block th:object="${asia}">
  <span th:text="*(dps_name}">
  <spsn th:text="*(dps_server}">
</th:block>

-- Loop 시 자체 카운팅
-- row : object의 데이터 바인딩
-- rowStat : 타임리프의 상태값
-- 
row, rowStat 를 표기했지만 rowStat 는 생략될수 있으며  오브젝트의 알리아스 row 명칭인 rowStat 는 생략 가능함

<th:block th:each="row, rowStat : ${sel_server}"> <!-- sel_server object -->
    <pre>
    index = <span th:text="${rowStat.index}"></span>
    count = <span th:text="${rowStat.count}"></span>
    size = <span th:text="${rowStat.size}"></span>
    even? = <span th:text="${rowStat.even}"></span>
    odd? = <span th:text="${rowStat.odd}"></span>
    first? = <span th:text="${rowStat.first}"></span>
    last? = <span th:text="${rowStat.last}"></span>
    current = <span th:text="${row.cce_hname}"></span>
    uuu = <span th:text="${row.cce_hname}"></span>
    </pre>
</th:block>

<!-- 1번째 선언이 오브젝트, 2번쩨가 시스템 변수 -->
<th:block th:each="dat, row : ${sel_server}"> <!-- sel_server object -->
    <th:block th:if="${ row.count == 1 }">
        <li th:data-filter="${dat.cce_num}" th:attr="class=${'loc ' + dat.cce_num} + ' filter-active'" th:text="${dat.cce_hname}"></li>
    </th:block>
    <th:block th:if="${ row.count != 1 }">
        <li th:data-filter="${dat.cce_num}" th:attr="class=${'loc ' + dat.cce_num} + '              '" th:text="${dat.cce_hname}"></li>
    </th:block>
</th:block>

<!-- 날찌변환 -->
<span th:text="${#temporals.format(row.com_bbs_create_date, 'yyyy-MM-dd HH:mm')}"></span>

 

 

^