#1、th:include 引入一个公共模版
常用于分离出公共模块,可多个页面引用
//固定参数,传到模版中
<head th:include="common/header :: commonHeader('签约')"></head>
//动态参数,传到模版中
<div th:include="common/form :: commonForm('Form',${id,${name},${sex},${types})"></div>
动态参数,在公共模版中用法,一种直接在页面上显示,th:text="${name}":
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="commonForm(modelId,userId,userName,sex,types)">
<input th:text="${name}" th:id="${id}"/>
</div>
</html>
另一种,在script中获取,需要加下<script th:inline="javascript"></script>
标签,在标签中使用:
<script th:inline="javascript">
//为了防转义
/*<![CDATA[*/
// 获取到模版上的参数
var id= [[${id}]];
var name= [[${name}]];
/*]]>*/
</script>
#2、th:replace 用一个模版替换当前的标签
<div th:replace="/common/common_tab ::marketTab(${market})"></div>
#3、th:each循环list
常用一个列表显示,用each来遍历后台返回过来的集合,
注意,循环里面显示的内容也要用th:text
来显示,面不能简单用 <td>${each.id}</td>
,这样会不显示,貌似 只要是动态的内容 就一定要用到thymeleaf
的模版语法
<tr th:each="each : ${list}">
<td th:text="${each.objectName}"></td>
<td th:text="${each.objectStatusDes}"></td>
<td th:text="${each.saleName}"></td>
</tr>
#4、th:if ,th:unless条件表达式**
用于判断符合条件的就显示,否则不显示
<span class="del-icon" th:if="${flag==true}&& each.fileName == null && each.text!='4'" th:attr="data-id=${each.id}" ></span>
如果if
表达式里面的等式成立,那么这个span
就显示,否则不显示。
th:unless 即相关的条件:
<td th:unless="${flag == null}"></td>
#5、th:attr属性
用于在标签上动态添加后台传过来的属性
<td ><span class="editable-text" th:text="${each.text}" id="testid" th:attr="data-pk=${each.id},data-text=${each.text}" th:if="${each.name!='test'}">
多个attr
属性,直接在key=value
之间加上逗号
来分隔即可,js获取:
$("#testid").attr("data-pk");
$("#testid").attr("data-text");
//设置attr
$("#testid").attr("data-text","xiaofang");
#6、th:id后台动态值作为这个元素的id
这里还有一个动态拼参数点:th:id="${each.id}+'_txt'"
<input th:id="${each.id}+'_txt'" type="hidden" th:value="${each.name}"/>
#7、th:href 动态属性
多个参数用逗号
隔开即可
<a th:href="@{/test/index/page(id=${id},pageNo=1,pageSize=10)}" >动态</a>
#8、日期格式化 #calendars.format方法
<td th:text="${#calendars.format(contacts.createTime, 'yyyy-MM-dd')}">2017-11-09</td>
#9、power of OGNL
直接从官网拿过来的:
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#order-list
<tr th:each="o : ${orders}" th:class="${oStat.odd}? 'odd'">
<td th:text="${#calendars.format(o.date,'dd/MMM/yyyy')}">13 jan 2011</td>
<td th:text="${o.customer.name}">Frederic Tomato</td>
<td th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}">23.32</td>
<td>
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
</td>
</tr>
重点:<td th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}">23.32</td>
这个表达式:
o.orderLines
拿到每个o
的orderLines
对象,{purchasePrice * amount}
对orderLines
对象里面的purchaseprice
amount
相乘,再用#aggregates.sum()
方法对结果求和。
直接从官网拿过来的:
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#order-details
<body th:object="${order}">
<div>
<p><b>Code:</b> <span th:text="*{id}">99</span></p>
<p>
<b>Date:</b>
<span th:text="*{#calendars.format(date,'dd MMM yyyy')}">13 jan 2011</span>
</p>
</div>
<h2>Customer</h2>
<div th:object="*{customer}">
<p><b>Name:</b> <span th:text="*{name}">Frederic Tomato</span></p>
<p>
<b>Since:</b>
<span th:text="*{#calendars.format(customerSince,'dd MMM yyyy')}">1 jan 2011</span>
</p>
</div>
<h2>Products</h2>
<table>
<tr>
<th>PRODUCT</th>
<th>AMOUNT</th>
<th>PURCHASE PRICE</th>
</tr>
<tr th:each="ol,row : *{orderLines}" th:class="${row.odd}? 'odd'">
<td th:text="${ol.product.name}">Strawberries</td>
<td th:text="${ol.amount}" class="number">3</td>
<td th:text="${ol.purchasePrice}" class="number">23.32</td>
</tr>
</table>
<div>
<b>TOTAL:</b>
<span th:text="*{#aggregates.sum(orderLines.{purchasePrice * amount})}">35.23</span>
</div>
<p>
<a href="list.html" th:href="@{/order/list}">Return to order list</a>
</p>
</body>
重点这一段:
<body th:object="${order}">
<div th:object="*{customer}">
<p><b>Name:</b> <span th:text="*{name}">Frederic Tomato</span></p>
</div>
</body>
用th:object="*{customer}"
取出套在th:object="${order}"
里面的复杂对象,然后再用*{name}
取出customer
对象属性
*{name}
相当于下面:
<p><b>Name:</b> <span th:text="${order.customer.name}">Frederic Tomato</span></p>
持续更新……
更多语法参考官网文档:
https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html