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>