thymeleaf基本操作

管理员 2019-10-01 21:16

显示文字拼接字符串

<span th:text="'Welcome,'+${user.name}">
<span th:text="|Welcome, ${user.name}|">
 
     
<tr>
    <td>备注</td>
    <td>[[${wxNum.remark}]]</td>
</tr>
<tr>
    <td> 结果</td>
    <td>[[${wxNum.reslt}]]</td>
</tr>

list遍历 a标签加href list遍历a

<div th:id="${user.id}"   th:each="user : ${userList}">
       <a th:href="@{/employee/}+${user.id}" th:text="#{edit}"></a>
</div>

list加 onclick

<div class="my_list_item"  th:each="address : ${addressList}">
					
		<div style="overflow: hidden;">
		<span th:onclick="|setDefault(${address.id})|" class="default" style="float: right; margin-right: 40rpx;">设为默认</span>
		</div>
 </div>
 
 
 正确写法 最好加转义
 th:onclick="'javascript:editUser(\''+${prod.id}+'\');'"

判断list是不是空

 <div th:if="${not #lists.isEmpty(userList)}">
        <p>size : <span th:text="${#lists.size(userList)}"/></p>
    </div>

if判断字符串和 boolean

<button th:if="${register.rock.name} eq '化探'" class="layui-btn layui-btn-sm"  onclick="show_tupu()">图谱</button>

<div th:if="${flag}==false  "  style="text-align: center; line-height: 100px;" >
   不可编辑
</div>

<div th:if="${flag}==true"  style="padding: 10px;" class="layui-form layui-form-pane" action="">

相加三目运算符加法

<tr>
    <td>已付金额</td>
    <td>[[${order.dingjin ?: 0} + ${order.yukuan ?: 0}]]</td>
</tr>

list 生成下标,索引,使用Stat变量

Stat 内置变量使用只需变量名+Stat即可

可以获取index,count,size,current,even,odd,first,last等属性

<li th:each="nav,d : ${application.navList}">
                        <a th:href="|${nav.url}|" data-track="官网|菜单栏|首页" th:text="${nav.name}">首 页</a>
                         <ul th:class="|subnav subnav${d.index}|">
                           
                        </ul>
                        <span></span>
</li>

<table class="top_10 mar_b_10" th:each="top : ${notComplianceTOP}">
			<tr>
				<td>
                    <!--Stat 内置变量  使用只需 变量名+Stat即可-->
                    
					<b th:text="${topStat.count}"/>
					
					<span class="f_gray" th:text="${top.TOPName}"/>
				</td>
				<td>
					<div class="bar_progress">
						<div class="bar_progress_bg" progress="60%"></div>
					</div>
				</td>
				<td class="f_gray" th:text="${top.TOPValue}"/>
			</tr>
</table>

格式化日期

<span th:text="${#dates.format(user.createDateTimeDate, 'yyyy-MM-dd HH:mm:ss')}" ></span>

<tr>
    <td>创建时间</td>
    <td>[[${#dates.format(wxNum.createDateTime, 'yyyy-MM-dd HH:mm:ss')}]]</td>
</tr>

小数点操作 formatDecimal

<div>
        <p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 0, 2)}"/></p>
 
        <p>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 5, 2)}"/></p>
</div>

if判断

<tr>
    <td>状态</td>
    <td th:if="${wxNum.state==0}">查询中</td>
    <td th:if="${wxNum.state==1}">查询完成</td>
</tr>

if判断 boolean

<div th:if="${#bools.isTrue(itdragonBool)}">
        <p th:text="${itdragonBool}"></p>  输出 true
</div>


var f = [[${flag}]] ;

$(function(){
if(f){
alert(1);
}else{
alert(0);
}

});

thymeleaf 操作request参数 URL参数地址参数请求的参数

<span style="margin-left: 20px;" th:text="|装箱标记：${param.xiang_bj}|"></span>

thymeleaf 操作session req application对象

<span th:text="${session.ss}"></span>
<span th:text="${#httpSession.getAttribute('ss')}">session</span>
<span th:text="${#httpServletRequest.getAttribute('qq')}">req</span>
<span th:text="${#httpServletRequest.getServletContext().getAttribute('pp')}">application</span>
 
全局对象使用这个也行
<title th:text="${application.config.webName}+'  管理系统' "></title>

输出list大小

<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a th:href="${bannerList[bannerList.size()-1].clickUrl}">
						<img th:src="${bannerList[bannerList.size()-1].imageUrl}">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->

三目运算

<textarea rows="3" v-model="detail"  th:text="${detail==null?'':detail}" ></textarea>

 <input type="text"  th:value="${userInfo!=null ?userInfo.phone:''}">
 <td th:utext="${recordValue.monthValue != 0 ? recordValue.monthValue : ''}"> </td>  如果是0显示空字符串。
 
 <td>[[${item.user.sex==1?'男':'女'}]]</td>

<script th:inline="javascript">
    var goDate =  [[${#dates.format(order.goDate, 'yyyy-MM-dd')}]] ;
    var state =  [[${order.state}]] ;
    var shouhou =  [[${order.shouhou}]] ;
    var loadPosition = [[${loadPosition}]] ;
    var lng = [[${goods.lng}]] ? [[${goods.lng}]] : 116.39705657958984; // 北京经度默认值
    var lat = [[${goods.lat}]] ? [[${goods.lat}]] : 39.90552253972854;  // 北京纬度默认值
    
</script>
var goDate =  "2025-06-26" ;    
var state =  4 ;    
var shouhou =  1 ;    
var loadPosition = false ;
var lng = null ? null : 116.39705657958984; // 北京经度默认值 
var lat = null ? null : 39.90552253972854; // 北京纬度默认值
 
 
这样的写法，字符串会自动加上""  
<script th:inline="javascript">
    var goDate = "[[${#dates.format(order.goDate, 'yyyy-MM-dd')}]]";  //如果强制加引号
    // var goDate = ""2025-06-26"";    就会多加一个引号。这样不好 容易出问题。
</script>


显示中文 好像转码了。
<script th:inline="javascript">
    var goDate =  [[${#dates.format(order.goDate, 'yyyy-MM-dd')}]] ;
    var state =  [[${order.state}]] ;
    var shouhou =  [[${order.shouhou}]] ;
    var title =   [[${order.goods.title}]] ;
    console.log(title); //但是输出控制台还是正常的中文。  
</script> 

var goDate =  "2025-06-26" ;    
var state =  4 ;    
var shouhou =  1 ;    
var title =   "\u9003\u79BB\u90FD\u5E02\u55A7\u56A3, \u9152\u5E97\u7B49\u60A8\u6765\u5BFB\u68A6 2. \u5728\u5FEB\u8282\u594F\u7684\u90FD\u5E02\u751F\u6D3B\u4E2D, \u7ED9\u81EA\u5DF1\u653E\u4E00\u4E2A\u5047, \u6765\u6211\u4EEC\u7684\u9152\u5E97, \u611F\u53D7\u6E29\u99A8\u4E0E\u60EC\u610F" ;    
//输出控制台 ： 逃离都市喧嚣, 酒店等您来寻梦 2. 在快节奏的都市生活中, 给自己放一个假, 来我们的酒店, 感受温馨与惬意
//title = title.replaceAll("逃离都市喧嚣","11"),  替换也是正常的替换



如果使用这样的写法 去掉 th:inline="javascript"
<script> 
var goDate =  [[${#dates.format(order.goDate, 'yyyy-MM-dd')}]] ;
    var state =  [[${order.state}]] ;
    var shouhou =  [[${order.shouhou}]] ;
    var title =   [[${order.goods.title}]] ;
   //字符串不会自动加引号 title报错了。 但是显示的是中文。 
</script>
   
    var goDate =  2025-06-26 ;
    var state =  4 ;
    var shouhou =  1 ;
    var title =   逃离都市喧嚣, 酒店等您来寻梦 2. 在快节奏的都市生活中, 给自己放一个假, 来我们的酒店, 感受温馨与惬意 ;
    title = title.replaceAll("逃离都市喧嚣","11"),
    
    
<script   th:inline="javascript" >
    var goDate =  [[${#dates.format(order.goDate, 'yyyy-MM-dd')}]] ;
    var state =  [[${order.state}]] ;
    var shouhou =  [[${order.shouhou}]] ;
    var title =   [[${order.goods.title}]] ;
    var openid =   [[${order.openid}]] ;  
    var n1 =  [[${navigator?.navigatorHeadId}]] ;
    n1输出的是null    n1 这个是压根没有navigator这个实体  也是null  不会报错。
    openid输出也是null  order 有openid但是  是null  有这个属性
    
    
    这里输入一个没有的属性  order有 但是d没有这个属性。
    var dd = [[${order?.d}]];  直接报错。因为我的order没有dd
    不能输出没有的属性。
</script>



<script th:inline="javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload','form',
        'element'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , form = layui.form //表格

            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element; //元素操作

        $('#state').html(getStateSelectHTML());
        if ([[${order?.state}]] !=  null) {
            $("#state").val([[${order?.state}]]);
        }
        form.render(); //更新全部表单

    });
</script>

单选 和 下拉  怎么样设置
<script  th:inline="javascript">
   layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload',
         'element','form' ], function() {
      var laydate = layui.laydate //日期
      , laypage = layui.laypage //分页
      , layer = layui.layer //弹层
      , table = layui.table //表格
            , form = layui.form
      , carousel = layui.carousel //轮播
      , upload = layui.upload //上传
      , element = layui.element; //元素操作
    
    
    //单选
      if([[${lunbo?.type}]]!=null){
         $("input[name=type][value=1]").attr("checked", [[${lunbo?.type}]] == 1 ? true : false);
         $("input[name=type][value=2]").attr("checked", [[${lunbo?.type}]] == 2 ? true : false);
      }
       //下拉
      if([[${lunbo?.jumpType}]]!=null){
         $("#jumpType").val([[${lunbo?.jumpType}]]);
      }
      form.render(); //更新全部表单
   });
</script>

商品编辑的写法

<script th:inline="javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel',
        'upload', 'element', 'form'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , form = layui.form
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element; //元素操作
        table_ = table;
        form_ = form;

        // 动态插入选项（需在DOM加载后执行）
        $('#recommend').html(getPositionSelectHTML());

        if ([[${goods?.recommend}]] != null) {
            $("#recommend").val([[${goods?.recommend}]]);
        }

        if ([[${goods?.goodsType?.fatherId}]] != null) {//设置分类1
            $("#goodsTypeId1").val([[${goods?.goodsType?.fatherId}]]);
        }

        if ([[${goods?.baoxian}]] !=  null) {
            $("input[name=baoxian][value=0]").attr("checked", [[${goods?.baoxian}]] == "0" ? true : false);
            $("input[name=baoxian][value=1]").attr("checked", [[${goods?.baoxian}]] == "1" ? true : false);
        }

        if ([[${goods?.yuding}]] != null) {
            $("input[name=yuding][value=0]").attr("checked", [[${goods?.yuding}]] == 0 ? true : false);
            $("input[name=yuding][value=1]").attr("checked", [[${goods?.yuding}]] == 1 ? true : false);
        }

        form.render(); //更新全部表单

        form.on('select(goodsTypeId1)', function (data) {
            init_type2();
        });
        init_type2();
    });
</script>

/*<![CDATA[*/

th:inline="javascript" 使用与不使用的区别

显示乱码

换一种写法正常了。

不显示表达式。

<script th:inline="none">
里面可以使用[[  ]]  这样的东西。

在html代码中使用对象。

<button onclick="window.open('${yuanCaiLiao.drawing.sales.qrFilePath}');" 
type="button" class="layui-btn layui-btn-xs layui-btn-normal">查看图纸</button>




<span class="td_span">规格：[[${yuanCaiLiao.drawing.guige}]]</span>

【Thymeleaf】格式化数字

左补0
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,3)}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,4)}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,5)}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,6)}">number format</p>
输出结果：

<p>010</p>
<p>0010</p>
<p>00010</p>
<p>000010</p>



千分位分隔符
<p th:with="num=1" th:utext="${#numbers.formatInteger(num,1,'COMMA')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,1,'COMMA')}">number format</p>
<p th:with="num=100" th:utext="${#numbers.formatInteger(num,1,'COMMA')}">number format</p>
<p th:with="num=1000" th:utext="${#numbers.formatInteger(num,1,'COMMA')}">number format</p>
<p th:with="num=10000" th:utext="${#numbers.formatInteger(num,1,'COMMA')}">number format</p>
<p th:with="num=100000" th:utext="${#numbers.formatInteger(num,1,'COMMA')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,2,'COMMA')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,3,'COMMA')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,4,'COMMA')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,5,'COMMA')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatInteger(num,6,'COMMA')}">number format</p>

输出结果：

<p>1</p>
<p>10</p>
<p>100</p>
<p>1,000</p>
<p>10,000</p>
<p>100,000</p>
<p>10</p>
<p>010</p>
<p>0,010</p>
<p>00,010</p>
<p>000,010</p>



千分位分隔符 + 保留2位小数
<p th:with="num=1" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=100" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=1000" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=10000" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=100000" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=1000000" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=1234567.8" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=1234567.85" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=1234567.8797" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>
<p th:with="num=1234567.8732" th:utext="${#numbers.formatDecimal(num,3, 'COMMA', 2,'POINT')}">number format</p>

输出结果：

<p>001.00</p>
<p>010.00</p>
<p>100.00</p>
<p>1,000.00</p>
<p>10,000.00</p>
<p>100,000.00</p>
<p>1,000,000.00</p>
<p>1,234,567.80</p>
<p>1,234,567.85</p>
<p>1,234,567.88</p>
<p>1,234,567.87</p>





货币格式
转换成货币格式时，是根据当前的 Locale 进行转换。

<p th:with="num=1" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=10" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=100" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=1000" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=10000" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=100000" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=1000000" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=1234567.8" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=1234567.85" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=1234567.8797" th:utext="${#numbers.formatCurrency(num)}">number format</p>
<p th:with="num=1234567.8732" th:utext="${#numbers.formatCurrency(num)}">number format</p>
Locale = zh_CN 时，输出结果：

<p>￥1.00</p>
<p>￥10.00</p>
<p>￥100.00</p>
<p>￥1,000.00</p>
<p>￥10,000.00</p>
<p>￥100,000.00</p>
<p>￥1,000,000.00</p>
<p>￥1,234,567.80</p>
<p>￥1,234,567.85</p>
<p>￥1,234,567.88</p>
<p>￥1,234,567.87</p>



Locale = en_US 时，输出结果：

<p>$1.00</p>
<p>$10.00</p>
<p>$100.00</p>
<p>$1,000.00</p>
<p>$10,000.00</p>
<p>$100,000.00</p>
<p>$1,000,000.00</p>
<p>$1,234,567.80</p>
<p>$1,234,567.85</p>
<p>$1,234,567.88</p>
<p>$1,234,567.87</p>
1
2
3
4
5
6
7
8
9
10
11
Locale = de_DE 时，输出结果：

<p>1,00 €</p>
<p>10,00 €</p>
<p>100,00 €</p>
<p>1.000,00 €</p>
<p>10.000,00 €</p>
<p>100.000,00 €</p>
<p>1.000.000,00 €</p>
<p>1.234.567,80 €</p>
<p>1.234.567,85 €</p>
<p>1.234.567,88 €</p>
<p>1.234.567,87 €</p>



百分比格式
<p th:with="num=1" th:utext="${#numbers.formatPercent(num, 1, 2)}">number format</p>
<p th:with="num=1" th:utext="${#numbers.formatPercent(num, 2, 2)}">number format</p>
<p th:with="num=1" th:utext="${#numbers.formatPercent(num, 3, 2)}">number format</p>
<p th:with="num=1" th:utext="${#numbers.formatPercent(num, 4, 2)}">number format</p>
<p th:with="num=0.80" th:utext="${#numbers.formatPercent(num, 1, 2)}">number format</p>
<p th:with="num=0.808" th:utext="${#numbers.formatPercent(num, 1, 2)}">number format</p>
<p th:with="num=0.80881" th:utext="${#numbers.formatPercent(num, 1, 2)}">number format</p>
<p th:with="num=0.80888" th:utext="${#numbers.formatPercent(num, 1, 2)}">number format</p>
<p th:with="num=3.1415926" th:utext="${#numbers.formatPercent(num, 1, 3)}">number format</p>        
输出结果：

<p>100.00%</p>
<p>100.00%</p>
<p>100.00%</p>
<p>0,100.00%</p>
<p>80.00%</p>
<p>80.80%</p>
<p>80.88%</p>
<p>80.89%</p>
<p>314.159%</p>
————————————————
版权声明：本文为CSDN博主「sayyy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sayyy/article/details/94397479

联系站长

站长微信:xiaomao0055

站长QQ:14496453

按分类分组

java(167)

python(23)

MySQL(28)

layUI(9)

公众号相关(3)

MybatisPlush(6)

Cocos Creator音爆小游戏_01(2)

Cocos Creator零基础游戏开发视频教程_01(34)

Cocos Creator计算器(4)

CocosCreator 飞机大战(29)

CocosCreator 拼图游戏(16)

CocosCreator棋牌炸金花(22)

CocosCreator 3D出租车-官方(19)

Cocos 3D 懒猫跑酷(13)

MyBatis-Plus教程(1)

vue3UI-ElementPlush 使用文档(21)

CocosCreator3D基础(27)

SpringBoot资料(105)

Linux系统(10)

windows系统(2)

VUE(30)

eclipse-tomcat(15)

我是医生(12)

爬虫相关(2)

小程序(133)

小游戏(4)

小程序-商城-shop-01(6)

手机(1)

docker(3)

JS/CSS/HTML(165)

电脑知识(16)

typescript教程(4)

python-selenium(6)

python-BeautifulSoup(1)

java-selenium(4)

jsoup解析html(1)

IDEA(27)

物联网(8)

excel技巧(5)

抖音小程序(1)

微信小程序，基础教程(1)

excel(2)

视频制作(12)

古诗、古文(3)

电影(1)

秘术(1)

个人分类(86)

其它分类(7)

实验室软件(3)

基金证券(1)

歌曲(1)

按日期分组

2025年10月(18)

2025年09月(10)

2025年08月(30)

2025年07月(19)

2025年06月(18)

2025年05月(19)

2025年04月(18)

2025年03月(7)

2025年02月(8)

2025年01月(11)

2024年12月(12)

2024年11月(12)

2024年10月(10)

2024年09月(2)

2024年08月(5)

2024年06月(1)

2024年05月(4)

2024年04月(8)

2024年03月(15)

2024年02月(11)

2024年01月(12)

2023年12月(18)

2023年11月(10)

2023年10月(8)

2023年09月(5)

2023年07月(12)

2023年05月(13)

2023年04月(24)

2023年03月(14)

2023年02月(5)

2023年01月(8)

2022年12月(11)

2022年11月(17)

2022年10月(39)

2022年09月(12)

2022年08月(6)

2022年07月(1)

2022年06月(5)

2022年05月(10)

2022年04月(10)

2022年03月(15)

2022年02月(8)

2022年01月(11)

2021年12月(9)

2021年11月(59)

2021年10月(46)

2021年09月(37)

2021年08月(68)

2021年07月(15)

2021年06月(5)

2021年05月(8)

2021年04月(10)

2021年03月(12)

2021年02月(20)

2021年01月(4)

2020年12月(8)

2020年11月(8)

2020年10月(16)

2020年09月(12)

2020年08月(11)

2020年07月(20)

2020年06月(23)

2020年05月(8)

2020年04月(14)

2020年03月(15)

2020年02月(18)

2020年01月(6)

2019年12月(12)

2019年11月(18)

2019年10月(18)

2019年09月(30)

2019年08月(19)

2019年07月(21)

2019年06月(20)