thymeleaf遇到的各類神坑

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>