以前写过一篇使用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的更多相关文章

  1. springboot项目中thymeleaf布局应用

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. Duilib源码分析(五)UI布局—Layout与各子控件

    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...

  3. jquery easy ui 1.3.4 布局layout（4）

    4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...

  4. [转]struct实例字段的内存布局(Layout)和大小(Size)

    在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...

  5. Extjs布局——layout: 'card'

    先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...

  6. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  7. WPF笔记(2.7 文字布局)——Layout

    原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...

  8. ExtJs常用布局--layout详解（含实例）

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  9. sencha touch 入门系列 (九) sencha touch 布局layout

    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...

随机推荐

  1. Jenkins 添加节点 java web方式

    环境说明: 主节点:windows server 从节点:两台linux 1. windows server安装jenkins就不多说了,直接添加节点配置如下 2.全局安全配置,指定确认的端口后,记得 ...

  2. 系统编程.py（多进程与多线程干货）

    1.并发与并行* 多个任务轮换在CPU上跑叫并发* 多个任务在多个CPU上跑,没有交替执行的* 状态叫并行.通常情况下都是并发,即使是多核.* 而控制进程先执行谁后执行谁通过操作系统的调度算法.目前已 ...

  3. uva 12096 - The SetStack Computer（集合栈）

    例题5-5 集合栈计算机(The Set Stack Computer,ACM/ICPC NWERC 2006,UVa12096) 有一个专门为了集合运算而设计的"集合栈"计算机. ...

  4. HDU暑假多校第八场G-Card Game

    一.题意 给出N个卡牌,卡牌的正反两面具有两个数字,取值范围为[1,2*n],给出若干个默认正面向上的卡牌,求最小反转多少张卡牌可以使得,每张卡牌朝上的面上都有一个不同的数字,同时满足最小反转次数的反 ...

  5. ABS(引数と同じ大きさの正の数を返す）

    ABS 関数 [数値] 数値式の絶対値を返します. 構文 ABS( numeric-expression ) パラメータ numeric-expression   絶対値が返される数値. 戻り値 数値 ...

  6. 从0开始 java 网站开发（jsp）【1】

    前提:安装java 并配置环境变量 java下载地址: http://www.java.com/zh_CN/ 环境变量配置 本地PC路径: 电脑--属性--高级--环境变量 在系统变量中: 新建 名: ...

  7. VS2017 远程调试小记

    VS2017 远程调试小记 支持windows\linux\macos, 直接连接项目点的上线版本代码进行调试.保证bug在同个环境下实时追踪. 注意点 双方的 msvsmon.exe版本需一致,最好 ...

  8. 源码解析：解析掌阅X2C 框架

    前言 掌阅出品了X2C 框架,听说可以加快性能.喜欢研究源码的我,肯定要来看下是怎么回事. 作为一个开发,应该不屑于只会使用开源框架. OK,来尝试下. 项目地址: https://github.co ...

  9. HBase全网最佳学习资料汇总

    HBase全网最佳学习资料汇总 摘要: HBase这几年在国内使用的越来越广泛,在一定规模的企业中几乎是必备存储引擎,互联网企业阿里巴巴.百度.腾讯.京东.小米都有数千台的HBase集群,中国电信的话 ...

  10. facebook hash key

    private void printHashKey() { try { PackageInfo info = getPackageManager().getPackageInfo( "xxx ...