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的更多相关文章
- springboot项目中thymeleaf布局应用
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Duilib源码分析(五)UI布局—Layout与各子控件
接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
- jquery easy ui 1.3.4 布局layout（4）
4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...
- [转]struct实例字段的内存布局(Layout)和大小(Size)
在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...
- Extjs布局——layout: 'card'
先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- WPF笔记(2.7 文字布局)——Layout
原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock 最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...
- ExtJs常用布局--layout详解（含实例）
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- sencha touch 入门系列 (九) sencha touch 布局layout
布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...
随机推荐
- VMware虚拟机下载与安装（内附密钥）
VMware下载与安装 一.虚拟机的下载 1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Win ...
- POCO TCPServer 解析
POCO C++ Libraries提供一套 C++ 的类库用以开发基于网络的可移植的应用程序,功能涉及线程.文件.流,网络协议包括:HTTP.FTP.SMTP 等,还提供 XML 的解析和 SQL ...
- springmvc重定向请求。
SpringMVC重定向传参数的实现(来自网友) 验证了我说的,从model层中拿来的数据,不管什么类型,都是通过隐含模型,中转,放入request中的.除非你特意把这些数据放到session域中. ...
- Tornado异步之-协程与回调
回调处理异步请求 回调 callback 处理异步官方例子 # 导入所需库 from tornado.httpclient import AsyncHTTPClient def asynchronou ...
- python 中 pynlpir错误 Cannot Open Configure file pynlpir\Data\Configure.xml 解决
在用python做分词.数据处理的时候,想调用pynlpir库,pynlpir.open()时出现错误,更新一下授权文件还是错误, 仔细一看错误是:Cannot Open Configure file ...
- Python的scrapy之爬取51job网站的职位
今天老师讲解了Python中的爬虫框架--scrapy,然后带领我们做了一个小爬虫--爬取51job网的职位信息,并且保存到数据库中 用的是Python3.6 pycharm编辑器 爬虫主体: im ...
- Python学习手册之控制结构（二）
在上一篇文章中,我们介绍了Python的一些控制结构,现在我们继续介绍剩下的 Python 控制结构.查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9972 ...
- python2.7练习小例子（十七）
17):题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字.例如2+22+222+2222+22222(此时共有5个数相加),几个数相加由键盘控制. 程序分析: ...
- intellij idea之git执行打标签(tag)和删除标签
intellij idea 版本为2017.2.6 进入Version Control-->log 1.在之前版本中,右键,新建标签 2.输入标签名称,建议输入版本号的方式 3.push标签 由 ...
- Git使用之一：创建仓储和提交文件
一.前期工作: 1.准备自己的文件夹用于同步文件 2.准备自己的Git账号,并设置好项目(推荐使用国产的码云) 3.安装Git软件 (下载地址: 32-bit Git for Window ...