官网地址
https://www.thymeleaf.org/documentation.html
https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
1. 动态编辑
SpringBoot2.0以上
spring:
thymeleaf:
cache: false
SpringBoot2.0 以下
配置文件：
spring:
profiles:
active: 205
thymeleaf:
cache: false
mode: LEGACYHTML5
Maven:
<!-- SpringBoot 2.0 以下 需要引入 -->
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
2. thymeleaf 开发模板
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="fragments/webModel">
<meta charset="UTF-8">
</html>
3. 配置引入模板
创建引用方法: 使用标签 th:fragment
<div th:fragment="唯一标示..."></div>
文件模板页面文件:
模板页面.jpg
example1: Bootstrap Head文件
<!-- 目录头 HTML -->
<div th:fragment="header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><b>Bootstrap Demo</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
TABLE
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="menu-item"><a th:href="@{/view/table/simple}">Simple</a></li>
<li class="menu-item"><a th:href="@{/view/table/complex}">Complex</a></li>
<li class="menu-item"><a th:href="@{/view/table/page}">后端分页</a></li>
</ul>
</li>
<li class="menu-item"><a th:href="@{/view/perm/dictionary/page}">FILE-INPUT</a></li>
</ul>
<div class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" id="header-search-text" th:value="${queryText}" placeholder="Search for...">
<span class="input-group-btn">
<a class="btn btn-default" id="header-search-btn"><i
class="glyphicon glyphicon-search"></i></a>
<a id="header-search-query" target="_blank"></a>
</span>
</div>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
<br><br><br>
</div>
example2: css,js 头文件
<div th:fragment="common-css-js">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<script th:src="@{/js/jquery-2.1.0.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
</div>
<div th:fragment="bootstrap-table">
<link th:href="@{/plugins/table/bootstrap-table.css}" rel="stylesheet">
<script th:src="@{/plugins/table/bootstrap-table.js}"></script>
<script th:src="@{/plugins/table/bootstrap-table-filter.js}"></script>
<script th:src="@{/plugins/table/bootstrap-table-zh-CN.js}"></script>
</div>
example2: js代码块
<!-- 目录选择js -->
<div th:fragment="init-menu">
<script th:inline="text">
$(function () {
var items = $(".menu-item");
for (var i = 0; i < items.length; i++) {
var item = $(items[i]);
var itemText = $(item.find("a")).text();
if (itemText == $("title").text()) {
item.addClass("active");
} else {
item.removeClass("active");
}
}
$("#header-search-btn").click(function () {
var searchText = $.trim($("#header-search-text").val());
if (searchText.length > 0) {
console.log("header-search-text:" + searchText);
$("#header-search-query").attr("href", "[[@{/view/search}]]" + "?query=" + searchText)[0].click();
}
})
});
</script>
实现样例：
页面目录位置.jpg
实例引用
- 引用css,js 文件
<span th:include="common/templates :: common-css-js"></span>- 引用 头文件
<div th:replace="common/templates :: header"></div>- 常用 th:inline="text" 代码块中 的 thymeleaf 语法代码会被编译
<script th:inline="text"></script >
代码块中需要被编译的需要用 ‘[[]]’ 进行匡套 如: [[@{/table/list}]]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Complex Template</title>
<span th:include="common/templates :: common-css-js"></span>
<span th:include="common/templates :: init-menu"></span>
<span th:include="common/templates :: bootstrap-table"></span>
<span th:include="common/templates :: bootstrap-table-export"></span>
</head>
<body>
<div th:replace="common/templates :: header"></div>
<div class="container">
<h3>Complex Template</h3>
<hr>
<table id="records-info"></table>
</div>
</body>
<script th:inline="text">
$('#records-info').bootstrapTable({
url: "[[@{/table/list}]]",//请求数据url
showRefresh: true,
smartDisplay: true,
showToggle: true,
paginationPreText: '上一页',
paginationNextText: '下一页',
pagination: true,//分页
// paginationVAlign: 'bottom',
pageNumber: 1,
pageSize: 15,
pageList: [10, 20, 30, 50, 'all'],//分页步进值
search: true, //显示搜索框
showExport: true, // 导出功能
fileName: '文档',
detailView: true, // 展开详情
detailFormatter: function (index, row, element) { // 展开复写方法
var json = JSON.stringify(row, null, 2);
// 控制Json代码显示格式: 自动换行
return "<pre style=' white-space:pre-wrap ; background-color: #ffffff'>" + json + "</pre>";
},
onPostBody: function () { // 加载完表格主体后执行
// 更改 展开样式
var list = $("#records-info").find(".detail-icon");
for (var i = 0; i < list.length; i++) {
var item = list[i];
// 修改展开符号颜色
$(item).css("color", "#555");
}
},
columns: [
{
field: 'id',
title: '编号',
},
{
field: 'name',
title: '名称',
},
{
field: 'time',
title: '时间',
},
{
field: 'context',
title: '序列号',
formatter: function (value, row, index) { // 单元格格式化函数
if (value.length > 40) {
return value.substr(0, 40);
}
return value;
}
},
{
field: 'status',
title: '状态',
formatter: function (value, row, index) { // 单元格格式化函数
if (value == 1) {
return "<span class='text-success'>正常</span>"
}
return "<span class='text-danger'>禁用</span>"
}
},
{
title: '编辑',
formatter: function (value, row, index) { // 单元格格式化函数
var id = row['id'];
var str = '<div class="btn-group"> ' +
' <button class="btn btn-default btn-edit" title="详情"' +
'data-toggle="tooltip" data-placement="left" data-value="' + id + '" > ' +
' <i class="glyphicon glyphicon-pencil"></i> ' +
' </button> ' +
' </div> ';
return str;
}
},
]
})
</script>
</html>
网友评论