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>