thymeleaf遇到的各种神坑

最新推荐文章于 2020-11-07 17:20:53 发布

转载最新推荐文章于 2020-11-07 17:20:53 发布 · 334 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2338224/blog/1611910

本文介绍如何在Thymeleaf模板引擎中集成JavaScript，包括对象引用、URL参数传递、点击事件处理等关键操作，并展示了表单、下拉框及数据表格的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1.javascript里面引用后端传过来的对象

JS部分代码一定要这样写,包括注释部分,也不能少,不要问我什么,去问变态作者吧

<script type="text/javascript" th:inline="javascript">
   /*<![CDATA[*/
    
   


   /*]]>*/
</script>

在js部分使用路径时候,要这样写:

var path = /*[[@{/permission/applyList}]]*/;

在url中带入多个参数写法:

<li><a th:href="@{/permission/applyList/(currentPage=${page.currentPage},pageSize=5 )}">5</a></li>

在标签中调用后台方法写法:

总条数：<span th:text="${page.getTotalCount()}"></span>&nbsp;&nbsp;

写onclick事件的写法(这个尤其变态)

<a href="#" th:onclick=" 'javascript:permission_audit('+ ${item.approveId} +') '"><span class="label label-primary">通过</span></a>
<a href="#" th:onclick=" 'javascript:permission_back('+ ${item.approveId} +') '"><span class="label label-danger">退回</span></a>

if判断的写法:

 <td th:if="${item.status == 1}"><span class="label label-success">已审核</span></td>

jsp include指令的替代写法

<div th:replace="head"></div>

form的action写法:

<form class="form-horizontal" th:action="@{/job/save}" method="post">

select下拉框迭代器+数据回显写法:

<div class="form-group">
	<label class="col-sm-2 control-label">任务类型</label>
	<div class="col-sm-10">
		 <select class="form-control " id="jobType" name="jobType" th:field="${jobInfo.jobType}">
			<option th:each="label : ${jobTypes}" th:value="${label.value}" th:text="${label.value}"></option>
		</select>
	</div>
</div>

form里面的input框数据回显写法

<div class="form-group">
	<label class="col-sm-2 control-label">执行参数</label> 
	<div class="col-sm-10">
		<input th:value="${jobInfo.execParams}" type="text" class="form-control" id="execParams" name="execParams"
			data-message-required="请填写执行参数." placeholder="请填写执行参数" />
	</div>
</div>

ID隐藏域写法

<div class="form-group">
	<div class="form-group">
		<input th:if="${jobInfo} != null" id="id" name="id" type="hidden" th:value="${jobInfo} ? ${jobInfo.id}" />
	</div>
</div>

table数据表格展示数据循环写法:

<table id="dataTable" class="table table-bordered table-striped">
	<thead>
		<tr>
			<th>Id</th>
			<th>名称</th>
		</tr>
	</thead>
	<tbody>
		<!-- 这里对应后端带回一个名叫"list"的变量 -->
		<tr th:each="item:${list}">
			<!-- fancybox超链接插件 -->
			<td>
				<a th:href="@{/job/detail/(id=${item.id})}" class="fancybox"  data-fancybox-type="iframe">
					<span th:text="${item.id}" class="label label-default"></span>
				</a>
			</td>
			<td th:text="${item.jobName}"></td>
		</tr>
	</tbody>
</table>

引用css,JS的写法

<link th:href="@{/plugins/fancybox/jquery.fancybox.css}" type="text/css" rel="stylesheet" />

<!-- DataTables -->
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/datatables/dataTables.bootstrap.min.js}"></script>

转载于:https://my.oschina.net/u/2338224/blog/1611910