Various shrines encountered by thymeleaf

1.javascript refers to the object passed from the backend

JS part of the code must be written in this way, including the comment part. Don't ask me what, ask the abnormal author

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


   /*]]>*/
</script>

 

When using the path in the js part, write as follows:

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

 

Multiple parameter writing methods are brought in the url:

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

 

The background method is called in the label:

Total number of entries: < span th: text = "${page. Gettotalcount()}" >;

 

How to write onclick events (this is especially abnormal)

<a href="#"Th: onclick ="'javascript: permission [audit ('+ ${item. Approveid} +') '"> < span class =" label primary "> via < / span ></a>
<a href="#"Th: onclick =" javascript: permission "(" + ${item. Approveid} + ') "" > < span class = "label danger" > return < / span ></a>

 

if judgment:

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

 

Alternative writing method of jsp include instruction

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

 

action method of form:

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

 

select drop-down box iterator + data echo writing method:

<div class="form-group">
	<label class="col-sm-2 control-label">Task type</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>

 

Data echo writing method of input box in form

<div class="form-group">
	<label class="col-sm-2 control-label">Execution parameters</label> 
	<div class="col-sm-10">
		<input th:value="${jobInfo.execParams}" type="text" class="form-control" id="execParams" name="execParams"
			data-message-required="Please fill in the execution parameters." placeholder="Please fill in the execution parameters" />
	</div>
</div>

ID hidden domain writing

<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 data table shows the data cycle writing method:

<table id="dataTable" class="table table-bordered table-striped">
	<thead>
		<tr>
			<th>Id</th>
			<th>Name</th>
		</tr>
	</thead>
	<tbody>
		<!-- Here's a back-end guy named"list"Variable of -->
		<tr th:each="item:${list}">
			<!-- fancybox Hyperlink plugin -->
			<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>

Reference 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>

Tags: Javascript JQuery JSP

Posted on Sun, 03 May 2020 03:35:28 -0400 by dj-kenpo