thymeleaf 布局layout

Posted asker009

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了thymeleaf 布局layout相关的知识，希望对你有一定的参考价值。

以前写过一篇使用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的主要内容，如果未能解决你的问题，请参考以下文章

Thymeleaf利用layout.html文件生成页面布局框架

Thymeleaf（第八章）模板布局

Spring boot：thymeleaf 没有正确渲染片段

thymeleaf 片段渲染后重新加载 javascript

使用 thymeleaf 用父布局包装模板

Android 底部工作表布局边距