jquery怎么用thymeleaf

文字语法

文字原型注释添加代码

文字编译级注释删除代码

自然语法

直接插入表达式

标准HTMLXML注释

Thymeleaf编译级注释块

Thymeleaf原型注释块

引入模板片段

模板片段传递参数

移除模板片段

if 和 unless

switch

设置任意属性

设置特殊属性

同时设置两个属性

添加属性值

混合值布尔属性

设置任意属性值

HTML5属性名

Messages

Variables

选择上的表达式

链接URLs

片段

文本值

数字值

布尔值

NULL值

文字标记

文本相加

文字替换

算术 *** 作

逻辑 *** 作

比较 *** 作

条件表达式

默认表达式

不 *** 作标记

数据转换格式化

预处理

标准表达式语法

设置文本内容

设置属性值

迭代

条件分支

模板布局

本地变量

注释

直接插入

文字模板模式

解耦模板逻辑

Thymeleaf是一个模板引擎，支持的模板类型有

HTML

XML

TEXT

JAVASCRIPT

CSS

RAW

标准表达式语法

Messages

语法：#{...} 

示例：

#{home.welcome(${session.user.name})} home.welcome=Hello {0}!12

Variables

语法：${...} 

示例：

${today} ${param.user.name} ${session.user.name} ${application.user.name} ${person.createCompleteNameWithSeparator('-')}12345

特殊变量：

选择上的表达式

语法：*{...} 

示例：

*{name} = ${user.name} //th:object=${user} = ${#object.name}123

链接URLs

语法：@{...} 

示例：

@{http://www.thymeleaf.org} @{user/login.html} @{/itemdetails?id=3} @{~/billing/processInvoice} @{//code.jquery.com/jquery-2.0.3.min.js} @{/order/details(orderId=${o.id})} @{/order/{orderId}/details(orderId=${o.id})}1234567

片段

语法：~{...} 

示例：

~{footer :: copy}1

文本值

语法：'...' 

示例：

'I\'m Beach Chou!'1

数字值

语法: number 

示例：

2016 3.14f12

布尔值

语法: true, false

NULL值

语法：null

文字标记

语法： token 

备注：只能使用A-Z, a-z, 0-9, ‘[‘, ‘]’, ‘.’, ‘-‘, ‘_’ 

示例：

IPhone71

文本相加

语法：expression + expression

文字替换

语法：|…| 

备注：内部只能使用变量 

示例：

|The name is ${name}|1

算术 *** 作

语法：+, -, *, /, %, div, mod 

示例：

1 + 11

逻辑 *** 作

语法： and, or, not 

示例：

${con} and ${co}1

比较 *** 作

语法：gt, lt, ge, le, eq, ne 

示例：

3 gt 21

条件表达式

语法： 

If-then: (if) ? (then) 

If-then-else: (if) ? (then) : (else) 

示例：

${con} ? true : false1

默认表达式

语法： 

Default: (value) ?: (defaultvalue) 

示例：

${con} ?: default1

不 *** 作标记

语法： _

数据转换/格式化

语法：${{...}}, *{{...}} 

示例：

${{user.lastAccessDate}}1

预处理

语法： __...__

设置文本内容

语法：th:text="...", th:utext="..." 

备注：text转义，utext不转义

设置属性值

设置任意属性

语法：th:attr="attrname=..." 

示例：

th:attr="class='main'"1

设置特殊属性

语法： th:name="..." 

示例：

th:class="'main'"1

同时设置两个属性

语法：

th:alt-title="..." th:lang-xmllang="..."12

示例：

th:alt-title="${title}"1

添加属性值

语法：

th:attrappend="attr1=...,attr2=..." th:attrprepend="attr1=...,attr2=..." th:classappend="..." th:styleappend="..."1234

示例：

th:classappend="'main'"1

混合值布尔属性

语法：th:name="true" 

示例：

th:checked="true"1

设置任意属性值

语法：th:*="..."

HTML5属性名

语法： data-th-*=”…” = th:*="..."

迭代

语法：th:each="iter : ${iterated}" 

示例：

th:each="prod : ${prods}" th:each="prod, iterStat : ${prods}" 迭代状态，默认为prodStat： iterStat.index iterStat.count iterStat.size iterStat.current iterStat.even iterStat.odd iterStat.first iterStat.last1234567891011

条件分支

if 和 unless

语法：

th:if="..." th:unless="..."12

switch

语法：

th:switch="..." th:case="..."12

模板布局

引入模板片段

语法：

th:fragment="..." th:insert="..." th:replace="..."123

示例：

th:insert="~{templatename::selector}" th:insert="~{templatename}" th:insert="~{::selector}" th:insert="~{}" th:insert="_"12345

模板片段传递参数

示例：

th:fragment="frag (onevar,twovar)" th:replace="::frag (${value1},${value2})" th:replace="::frag (onevar=${value1},twovar=${value2})"123

移除模板片段

语法：th:remove="..." 

备注：可以使用的值，all, body, tag, all-but-first, none

本地变量

语法：th:with="name=..." 

示例：

th:with="firstPer=${persons[0]}"1

注释

标准HTML/XML注释

语法：

<!--...-->1

示例：

<!-- User info follows -->1

Thymeleaf编译级注释块

语法：

<!--/* ... */-->1

示例：

<!--/*--><div>you can see me only before Thymeleaf processes me! </div><!--*/-->12345

Thymeleaf原型注释块

语法：

<!--/*/ ... /*/-->123

示例：

<!--/*/ <div th:text="${...}">... </div>/*/-->12345

直接插入

直接插入表达式

语法：

th:inline="...", none, text, javascript, css [[...]] = th:text="..." [(...)] = th:utext="..."123

示例：

var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit"1

文字模板模式

文字语法

语法：

[#element ...]...[/element] [#element ... /] 如果element为th:block可以省略123

文字原型注释：添加代码

语法：

/*[+ ... +]*/123

示例：

/*[+ var msg = "This is a working application"+]*/123

文字编译级注释：删除代码

语法：

/*[- */ ... /* -]*/123

示例：

/*[- */ var msg = "This is a working application"/* -]*/123

自然语法

语法：

/*[[ ... ]]*/ ...1

备注：前面的代码编译起效，后面的静态起效 

示例：

var username = /*[[${session.user.name}]]*/ "Sebastian Lychee"1

解耦模板逻辑

home.html

<!DOCTYPE html><html><body><table id="usersTable"><tr><td class="username">Jeremy Grapefruit</td><td class="usertype">Normal User</td></tr><tr><td class="username">Alice Watermelon</td><td class="usertype">Administrator</td></tr></table></body></html>123456789101112131415

home.th.xml

<?xml version="1.0"?><thlogic>    <attr sel="#usersTable" th:remove="all-but-first">        <attr sel="/tr[0]" th:each="user : ${users}">            <attr sel="td.username" th:text="${user.name}" />            <attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />        </attr>    </attr></thlogic>123456789

sel=”whatever”, selector可以为：

<whatever>

th:fragment=”whatever”

th:ref=”whatever”

thymeleaf用标签给页面select下拉框赋值的实现方法：

1、定义type.java

public class Type {

   private Integer id

   private String type

  ...getters and setters

}

2、定义SeedStarterMngController.java，将来给select的option填充值：

@ModelAttribute("allTypes")

   public List<Type>populateTypes() {

       Type type1 = new Type()

       type1.setId(1)

       type1.setType("OUTDOOR")

       Type type2 = new Type()

       type2.setId(2)

       type2.setType("INDOOR")

       List<Type>tipos = new ArrayList<Type>()

       tipos.add(type1)

       tipos.add(type2)

       return tipos

   }

3、填充方法实现页面seedstartermng.html：

<select th:field="*{type}">

       <option th:each="type : ${allTypes}" th:value="${type.id}" th:text="${type.type}">typeSelect</option>

</select>

4、实现效果：

---