spring boot - thymeleaf模版语法

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拿到每个oorderLines对象,{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

猜你喜欢

转载自blog.csdn.net/lh87270202/article/details/80257859