Thymeleaf標籤

時間 2020-04-10
標籤 thymeleaf 標籤简体版
原文原文鏈接
官網：https://www.thymeleaf.org/

# Thymeleaf
#引入標籤 thymeleaf、shiro 
<html 
	xmlns:th="http://www.thymeleaf.org" 
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	
#設置class
	th:class
	class類拼接：th:classappend 
		ps: <i class="layui-icon" th:classappend="'layui-icon-'+${menu.img}"></i>
	style樣式拼接：th:styleappend
	三目運算取值例子：<li class="layui-nav-item" th:classappend="${#httpServletRequest.getParameter('falg')} == 1?'layui-this':'' "><a href="../blog/index?falg=1">首頁</a></li>
	
#顯示文本
	顯示普通文本內容
	th:text="${menu.name}"
	顯示讀取帶html標籤的內容
	th:utext="${l.content}"
	
#循環th:each
	<li th:each="menu:${menuList}">
		${menu.name}
	</li>
	
	<tr th:each="user,userStat:${users}"> 
	userStat是狀態變量，若是沒有顯示設置狀態變量，thymeleaf會默 認給個「變量名+Stat"的狀態變量。
	對arrayList對象users遍歷，使用user做爲接受參數接收，使用userStat做爲users下標值，經過userStat.index獲得當前所處下標值；

	//html代碼
	<tr th:each="plan : ${planList}" th:id="${plan.planId}"
		th:attr="data-plan-status=${plan.planStatus}">
		<td th:text="${plan.planName}"></td>
		<td th:text="${plan.planCode}"></td>
	<div th:switch="${failMsgList.get(__${planStat.index}__)}">
		<td th:case="00">後臺系統故障</td>
		<td th:case="02">此方案待審覈，不支持下架</td>
		<td th:case="01">此方案未上架，不支持下架</td>
		<td th:case="04">此方案未上架，不支持下架</td>
		<td th:case="03">此方案未上架，不支持下架</td>
		<td th:case="06">此方案已經下架</td>
		<td th:case="*"></td>
	</div>
	說明：failList裏的狀態碼的獲取，經過tr循環到第幾行的索引來取
	
網頁來源說明:https://www.cnblogs.com/xuchao0506/p/9896430.html
	
#標籤外賦值
	[[${menu.name}]]
	
#th:value 三目運算取值
	<input type="email" id="salesemail" th:value="${sales!=null?sales.email:''}"  placeholder="Email" autocomplete="off" class="layui-input  layui-readonly" disabled="true"  >						

	
#a連接 th:href
	直接顯示連接地址：<a th:href="@{child.url}">
	獲取後臺連接地址：<a th:href="${child.url}" th:text="${child.name}"/>
	在html頁面中經過以下方式進行url的動態參數拼接便可,若是是多個參數,只須要在（）內逗號隔開
	<a  th:href='@{/blog/comment(id=${blog.getId()})}' class="pull-right">寫評論</a>
	鏈接跳轉傳遞參數
	th:href='@{/blog/details(id=${blog.getId()})}'
	th:href="@{/Controller/behavior(param1=1,param2=${person.id})}"。就是使用逗號隔開多個參數
	
# th:οnclick
	<a title="Edit" href="javascript:;"
                           th:οnclick="'javascript:member_edit('+${book.getBookId()}+','+'\''+${book.getBookPosition()}+'\''+','+${book.getBookPrice()}+','+'\''+${book.getBookName()}+'\''+','+'\''+${book.getBookAuthor()}+'\''+','+'\''+${book.getBookIsbn()}+'\''+')'"
                           class="btn btn-xs btn-info"> <i class="icon-edit bigger-120"></i>
                        </a>
	
#select選擇框下拉循環：
	<select name="roleId" id="roleId">
		<option value="">請選擇</option>
		<option th:each="role:${roleList}" th:value="${role.id}" th:text="${role.name}"></option>
    </select>
	選中
	 th:selected="${goods.catId eq c.id}"
	
#th:attr用法
	一、寫死的單個屬性值添加
	th:attr="class=btn"
	二、寫死的多個屬性值添加
	th:attr="class=btn,title=link"
	三、當一個屬性的值較多的時候能夠用 | 
	th:attr="class=|btn btn-group|"
	四、屬性值動態賦值
	th:attr="value=#{obj.value},title=#{obj.title}"
	五、動態拼接屬性值
	th:attr="value=select_val|#{obj.val}|"
	六、屬性值中有引號的狀況
	th:attr="data-am-collapse=|{target:'#collapse-nav5'}|"
 
#th:if 判斷
	gt：great than（大於）>
	ge：great equal（大於等於）>=
	eq：equal（等於）==
	lt：less than（小於）<
	le：less equal（小於等於）<=
	ne：not equal（不等於）!=
例如：
	<div th:if=" ${count} lt '3'"></div>

#判斷是否包含
	th:checked="${#strings.contains(zx_data.menuControl,menu.id)}"
#格式化數字對象<td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>

#四種表達式參數地址：https://www.cnblogs.com/nuoyiamy/p/5591559.html

# th:src 圖片地址三目運算
	<img class="layui-nav-img" th:src="${(user.avatarUrl != null && !#strings.isEmpty(user.avatarUrl)) ? '/asset/avatar/'+user.avatarUrl : '/asset/avatar/head_portrait2.png'}"/>
	<span th:text="${user.name}"></span>

#shiro標籤在html頁面起做用配置和thymeleaf頁面使用
	一、html頁面引入
	<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

	二、ShiroConfig配置引入
	@Bean
	public ShiroDialect shiroDialect(){
		return new ShiroDialect();
	}
	
	三、pom.xml引入jar包
	<!-- shiro config html-->
	<dependency>
		<groupId>com.github.theborakompanioni</groupId>
		<artifactId>thymeleaf-extras-shiro</artifactId>
		<version>2.0.0</version>
	</dependency>

#th:include引入公共部分
	公共部分
		<div xmlns:th="http://www.thymeleaf.org" th:fragment="header">
	引入部分
		<div class="header" th:include="common/head :: header"></div>
		其中 common/head 爲文件的位置名字  header是公共頁面定義的fragment

#js取值
必須加上th:inline="javascript"纔可以使用該方法。
	<script th:inline="javascript">
	
#lay-href跳轉	
左側菜單點擊,右邊打開新的頁面
<a th:attr="lay-href=${child.url}"  th:text="${child.name}">菜單</a>

#左側菜單點擊刷新右邊顯示框
<a th:href="@{${child.url}}" th:target="bodyFrame"  th:text="${child.name}">菜單</a>
<iframe name="bodyFrame" src="census/goIndex" frameborder="0" class="layadmin-iframe" ></iframe>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。