thymeleaf 布局layout
阿新 • • 發佈：2018-08-06
客戶管理 ctype order containe http sheet dex .cn trap
以前寫過一篇使用thymeleaf實現div中加載html
大部分內容都沒問題，只是部分知識已經過時了。
重新記錄：
依賴依然是
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
index.html作為layout模板，不需要引入xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
引入xmlns:layout="http://www.w3.org/1999/xhtml"就可以
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link> <script src="../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script> <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script> <title>客戶管理系統</title> </head> <body> <div th:replace="fragments/navTitle::navTitle"></div> <div layout:fragment="content"></div> <th:block layout:fragment = "bodyAssets"> </th:block>
list.html作為content直接顯示在index.html 的<div layout:fragment="content"></div>裏
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="~{index}" 這裏就是指向index.html > <head>
<!--這裏註銷是避免和index.html裏的css重復-->
<!--<link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>-->
<title>客戶列表</title> </head> <body> <div class="container" layout:fragment="content"> <!--<div class="container form-group">--> <!--<div class="col-sm-2 control-label">--> <!--<a href="/customer/add" th:href="@{/customer/add}" class="btn btn-info">add</a>--> <!--</div>--> <!--</div>--> <table class="table table-hover table-striped table-bordered"> <thead> <tr> <th>#</th> <th>filesNo</th> <th>customerName</th> <th>agreementNum</th> <th>agreementMoney</th> <th>inRoomNum</th> <th>編輯</th> <th>刪除</th> </tr> </thead> <tbody> <!--等同於 <tr th:each="customer : ${customerPage.Content()}">--> <tr th:each="customer : ${customerPage.getContent()}"> <!--等同於<th scope="row" th:text="${customer.getCustomerId()}">1</th>--> <th scope="row" th:text="${customer.customerId}">1</th> <td th:text="${customer.filesNo}">neo</td> <td><a th:href="@{/customer/toEdit/{id}/{pageNo}(id=${customer.customerId},pageNo=${pageIndex})}" th:text="${customer.customerName}">detail</a></td> <td th:text="${customer.agreementNum}">6</td> <td th:text="${customer.agreementMoney}">6</td> <td th:text="${customer.inRoomNum}">6</td> <td><a th:href="@{/customer/toEdit/{id}/{pageNo}(id=${customer.customerId},pageNo=${pageIndex})}">編輯</a></td> <td><a th:href="@{/customer/delete/{id}(id=${customer.customerId})}">刪除</a></td> </tr> </tbody> </table> <div class="text-right"> <input type="hidden" name="customerName" th:value="${customerName}"> <ul class="pagination" > <li class="text-center"><a th:text="‘共計‘+${customerPage.getTotalPages()}+‘頁‘"></a></li> <li th:class="${pageIndex==1}?‘disabled‘ : ‘‘" th:if="${pageIndex-1 >=1}"><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-1})}">上一頁</a></li> <li th:if="${pageIndex-3 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-3})}" th:text="${pageIndex -3}" >1</a></li> <li th:if="${pageIndex-2 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-2})}" th:text="${pageIndex -2}" >1</a></li> <li th:if="${pageIndex-1 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-1})}" th:text="${pageIndex -1}" >1</a></li> <li class="active"><a href="#" th:text="${pageIndex}" >1</a></li> <li th:if="${pageIndex+1 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+1})}" th:text="${pageIndex +1}" >1</a></li> <li th:if="${pageIndex+2 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+2})}" th:text="${pageIndex +2}" >1</a></li> <li th:if="${pageIndex+3 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+3})}" th:text="${pageIndex +3}" >1</a></li> <li th:class="${pageIndex==customerPage.getTotalPages()}?‘disabled‘ : ‘‘" th:if="${pageIndex+1 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+1})}">下一頁</a></li> </ul> </div> <br> </div> <script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script> <!-- 在這裏引入是避免和index.html裏重復引入，單頁也可以安全調試--> <script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script> </body> </html>
thymeleaf 布局layout