thymeleaf
程序员文章站
2022-07-15 15:05:41
...
Thymeleaf 分页功能
https://www.iteye.com/blog/gjp014-2387037
Thymeleaf select 使用 和多select 级联选择
https://www.iteye.com/blog/gjp014-2395655
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="thymeleaf/templates/layout.html">
<head>
<script type="text/javascript" th:src="@{/js/sgo/endpoint.js}"></script>
<title>Endpoint Form</title>
</head>
<body>
<div layout:fragment="content">
<form action="#" id="endpoint-form" th:object="${endpointForm}" method="post"
th:action="@{/{deviceAction} (deviceAction=${endpointForm.id == null ? 'add-endpoint.mvc' :'endpoints/'+endpointForm.id+'/updateendpoint.mvc'})}" >
<input th:type="hidden" th:field="*{id}" th:if="${endpointForm.id != null}" />
<div th:if="${#fields.hasErrors('*')} or ${resultList != null}" class="alert alert-danger" role="alert">
<ul>
<li th:each="e : ${#fields.detailedErrors()}" th:class="${e.global}? globalerr : fielderr">
<span th:text="${e.global}? '*' : ${e.fieldName}">The field name</span> -
<span th:text="${e.message}">The error message</span>
</li>
<li th:each="r : ${resultList}" th:class="globalerr">
<span th:text="'*'">The field name</span> -
<span th:text="${r.getMessage()}">The error message</span>
</li>
</ul>
</div>
<div th:if="${success != null}" class="alert alert-success" role="alert" th:text="${success}" />
<div class="form-group" th:name="endPointName" th:errorclass="has-error">
<label class="control-label" th:for="endPointName">Endpoint Name <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{endPointName}" class="form-control required" id="endPointName"/>
</div>
<div class="row-fluid col-md-12">
<div class="form-group col-md-2" th:name="EPSTypeID" th:errorclass="has-error">
<label class="control-label" th:for="EPSTypeID">Endpoint Type Id <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" th:field="*{EPSTypeID}" class="form-control" id="EPSTypeID">
<option th:each="epsTypes : ${epsTypes}"
th:value="${epsTypes.id}"
th:text="${epsTypes.name}">Endpoint Type Id</option>
</select>
</div>
<div class="form-group col-md-2" th:name="msoId" th:errorclass="has-error" >
<label class="control-label" th:for="msoId">MSO Id <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" th:field="*{msoId}" class="form-control" id="msoID">
<option th:each="mso : ${mso}"
th:value="${mso.id}"
th:text="${mso.name}">MSO Id</option>
</select>
</div>
</div>
<!--div class="row-fluid col-md-12">
<div class="form-group col-md-2" th:name="city" th:errorclass="has-error">
<label class="control-label" th:for="city">City <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{city}" class="form-control required" />
</div>
<div class="form-group col-md-2" th:name="state" th:errorclass="has-error" >
<label class="control-label" th:for="state">State </label>
<input type="text" th:field="*{state}" class="form-control required" />
</div>
<div class="form-group col-md-2" th:name="province" th:errorclass="has-error" >
<label class="control-label" th:for="province">Province </label>
<input type="text" th:field="*{province}" class="form-control required" />
</div>
<div class="form-group col-md-2" th:name="country" th:errorclass="has-error" >
<label class="control-label" th:for="country">Country <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{country}" class="form-control required" />
</div>
</div-->
<div class="row-fluid col-md-12">
<div class="form-group col-md-2" th:name="country" th:errorclass="has-error" >
<label class="control-label" th:for="country">Country <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" th:field="*{country}" class="form-control" name="startArea1" id="start_select1">
<!--option value="">Choose Country</option-->
<option th:each="country:${country}" th:value="${country.id}" th:text="${country.name}" ></option>
</select>
</div>
<div class="form-group col-md-2" th:name="state" th:errorclass="has-error" >
<label class="control-label" th:for="state">State </label>
<select size ="5" class="form-control" th:field="*{state}" name="startArea3" id="start_select3">
<!--option value="">Choose State</option-->
<option th:each="state : ${state}"
th:value="${state.id}"
th:text="${state.name}">State</option>
</select>
</div>
<div class="form-group col-md-2" th:name="province" th:errorclass="has-error" >
<label class="control-label" th:for="province">Province </label>
<!--select class="form-control" name="startArea2" id="start_select2">
<option value="">Choose Province</option>
</select-->
<select size ="5" class="form-control" th:field="*{province}" id="start_select2">
<option th:each="province : ${province}"
th:value="${province.id}"
th:text="${province.name}">Province</option>
</select>
</div>
<div class="form-group col-md-2" th:name="city" th:errorclass="has-error">
<label class="control-label" th:for="city">City <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" class="form-control" th:field="*{city}" name="startArea4" id="start_select4">
<!--option value="">Choose City</option-->
<option th:each="city : ${city}"
th:value="${city.id}"
th:text="${city.name}">City</option>
</select>
</div>
</div>
<div class="form-group" th:name="timezoneName" th:errorclass="has-error">
<label class="control-label" th:for="TimezoneID">Timezone <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{timezoneName}" class="form-control required" id="timezoneName"/>
</div>
<button type="submit" class="btn btn-sm btn-primary" id="endpoint-submit" th:text="${endpointForm.id == null ? 'Create' : 'Update'}">Create</button>
<a th:href="@{{deviceAction} (deviceAction=${endpointForm.id == null ? 'endpoints.mvc' :'/endpoints/'+endpointForm.id+'/devices.mvc'})}" title="Cancel" class="btn btn-sm btn-primary">Cancel</a>
</form>
</div>
</body>
</html>
$(document).ready(function() {
$('#endpoint-form')
.on('change','#start_select1', function() {
//.on('change','#country', function() {
let countryid = $("#start_select1").val();
$.getJSON( "/" + contextRoot + "/provinces-json.mvc?id="+countryid, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select2').html(items.join(""));
});
$.getJSON( "/" + contextRoot + "/states-json.mvc?id="+countryid, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select3').html(items.join(""));
});
$('#start_select4').html("");
document.getElementById("timezoneName").value ="";
})
.on('change','#start_select2', function() {
//.on('change','#province', function() {
let provinceID = $(this).val();
let stateID = 0;
let countryid = $('#start_select1').val();
$.getJSON( "/" + contextRoot + "/cities-json.mvc?id="+countryid+"&provinceID="+provinceID+"&stateID="+stateID, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select4').html(items.join(""));
});
})
.on('change','#start_select3', function() {
//.on('change','#state', function() {
let stateID = $(this).val();
let provinceID = 0;
let countryid = $('#start_select1').val();
$.getJSON( "/" + contextRoot + "/cities-json.mvc?id="+countryid+"&provinceID="+provinceID+"&stateID="+stateID, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select4').html(items.join(""));
});
})
.on('change','#start_select4', function() {
//.on('change','#city', function() {
let cityID = $(this).val();
$.getJSON( "/" + contextRoot + "/timezone-json.mvc?cityID="+cityID, function( data ) {
if(data !=null){
console.log(data.name);
//$('#timezoneName').html(data.name);
document.getElementById("timezoneName").value = data.name;
}
//let items = [];
//$.each( data, function( key, value ) {
//console.log(value);
//items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
// });
//$('#timezoneName').html(items.join(""));
});
})
.on("click","#endpoint-submit",function(e) {
e.preventDefault();
confirmAdd(dataToParams($('#endpoint-form').data(),$(this).data()));
});
});
@RequestMapping(value = "/provinces-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public List<Province> getProvinceInJSON(@RequestParam(value="id", required = false) Long countryID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
List<Province> province;
logger.info("get province,countryID:"+ countryID);
if (countryID != null) {
province = provinceRepository.searchByCountryIdAndFetchProvince(countryID);
}else{
province = null;
}
return province;
}
@RequestMapping(value = "/states-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public List<State> getStateInJSON(@RequestParam(value="id", required = false) Long countryID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
List<State> state;
logger.info("get state,countryID:"+ countryID);
if (countryID != null) {
state = stateRepository.searchByCountryIdAndFetchState(countryID);
}else{
state = null;
}
return state;
}
@RequestMapping(value = "/cities-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public List<City> getCityInJSON(@RequestParam(value="id", required = false) Long countryID,
@RequestParam(value="provinceID", required = false) Long provinceID,
@RequestParam(value="stateID", required = false) Long stateID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
List<City> city;
logger.info("get city,countryID:"+ countryID);
logger.info("get city,provinceID:"+ provinceID);
logger.info("get city,stateID:"+ stateID);
if (provinceID > 0 ) {
city = cityRepository.searchByProvinceIdAndFetchCity(provinceID);
}else{
city = cityRepository.searchByStateIdAndFetchCity(stateID);
}
return city;
}
@RequestMapping(value = "/timezone-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public Timezone getTimezoneInJSON(
@RequestParam(value="cityID", required = false) Long cityID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
logger.info("get timezone,cityID:"+ cityID);
if (cityID > 0 ) {
Timezone timezone = timezoneRepository.searchByCityIdAndFetchTimezone(cityID);
logger.info("timezone:"+ timezone.getName());
return timezone;
}else{
return null;
}
}
https://www.iteye.com/blog/gjp014-2387037
Thymeleaf select 使用 和多select 级联选择
https://www.iteye.com/blog/gjp014-2395655
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="thymeleaf/templates/layout.html">
<head>
<script type="text/javascript" th:src="@{/js/sgo/endpoint.js}"></script>
<title>Endpoint Form</title>
</head>
<body>
<div layout:fragment="content">
<form action="#" id="endpoint-form" th:object="${endpointForm}" method="post"
th:action="@{/{deviceAction} (deviceAction=${endpointForm.id == null ? 'add-endpoint.mvc' :'endpoints/'+endpointForm.id+'/updateendpoint.mvc'})}" >
<input th:type="hidden" th:field="*{id}" th:if="${endpointForm.id != null}" />
<div th:if="${#fields.hasErrors('*')} or ${resultList != null}" class="alert alert-danger" role="alert">
<ul>
<li th:each="e : ${#fields.detailedErrors()}" th:class="${e.global}? globalerr : fielderr">
<span th:text="${e.global}? '*' : ${e.fieldName}">The field name</span> -
<span th:text="${e.message}">The error message</span>
</li>
<li th:each="r : ${resultList}" th:class="globalerr">
<span th:text="'*'">The field name</span> -
<span th:text="${r.getMessage()}">The error message</span>
</li>
</ul>
</div>
<div th:if="${success != null}" class="alert alert-success" role="alert" th:text="${success}" />
<div class="form-group" th:name="endPointName" th:errorclass="has-error">
<label class="control-label" th:for="endPointName">Endpoint Name <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{endPointName}" class="form-control required" id="endPointName"/>
</div>
<div class="row-fluid col-md-12">
<div class="form-group col-md-2" th:name="EPSTypeID" th:errorclass="has-error">
<label class="control-label" th:for="EPSTypeID">Endpoint Type Id <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" th:field="*{EPSTypeID}" class="form-control" id="EPSTypeID">
<option th:each="epsTypes : ${epsTypes}"
th:value="${epsTypes.id}"
th:text="${epsTypes.name}">Endpoint Type Id</option>
</select>
</div>
<div class="form-group col-md-2" th:name="msoId" th:errorclass="has-error" >
<label class="control-label" th:for="msoId">MSO Id <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" th:field="*{msoId}" class="form-control" id="msoID">
<option th:each="mso : ${mso}"
th:value="${mso.id}"
th:text="${mso.name}">MSO Id</option>
</select>
</div>
</div>
<!--div class="row-fluid col-md-12">
<div class="form-group col-md-2" th:name="city" th:errorclass="has-error">
<label class="control-label" th:for="city">City <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{city}" class="form-control required" />
</div>
<div class="form-group col-md-2" th:name="state" th:errorclass="has-error" >
<label class="control-label" th:for="state">State </label>
<input type="text" th:field="*{state}" class="form-control required" />
</div>
<div class="form-group col-md-2" th:name="province" th:errorclass="has-error" >
<label class="control-label" th:for="province">Province </label>
<input type="text" th:field="*{province}" class="form-control required" />
</div>
<div class="form-group col-md-2" th:name="country" th:errorclass="has-error" >
<label class="control-label" th:for="country">Country <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{country}" class="form-control required" />
</div>
</div-->
<div class="row-fluid col-md-12">
<div class="form-group col-md-2" th:name="country" th:errorclass="has-error" >
<label class="control-label" th:for="country">Country <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" th:field="*{country}" class="form-control" name="startArea1" id="start_select1">
<!--option value="">Choose Country</option-->
<option th:each="country:${country}" th:value="${country.id}" th:text="${country.name}" ></option>
</select>
</div>
<div class="form-group col-md-2" th:name="state" th:errorclass="has-error" >
<label class="control-label" th:for="state">State </label>
<select size ="5" class="form-control" th:field="*{state}" name="startArea3" id="start_select3">
<!--option value="">Choose State</option-->
<option th:each="state : ${state}"
th:value="${state.id}"
th:text="${state.name}">State</option>
</select>
</div>
<div class="form-group col-md-2" th:name="province" th:errorclass="has-error" >
<label class="control-label" th:for="province">Province </label>
<!--select class="form-control" name="startArea2" id="start_select2">
<option value="">Choose Province</option>
</select-->
<select size ="5" class="form-control" th:field="*{province}" id="start_select2">
<option th:each="province : ${province}"
th:value="${province.id}"
th:text="${province.name}">Province</option>
</select>
</div>
<div class="form-group col-md-2" th:name="city" th:errorclass="has-error">
<label class="control-label" th:for="city">City <span class="glyphicon glyphicon-asterisk"></span></label>
<select size ="5" class="form-control" th:field="*{city}" name="startArea4" id="start_select4">
<!--option value="">Choose City</option-->
<option th:each="city : ${city}"
th:value="${city.id}"
th:text="${city.name}">City</option>
</select>
</div>
</div>
<div class="form-group" th:name="timezoneName" th:errorclass="has-error">
<label class="control-label" th:for="TimezoneID">Timezone <span class="glyphicon glyphicon-asterisk"></span></label>
<input type="text" th:field="*{timezoneName}" class="form-control required" id="timezoneName"/>
</div>
<button type="submit" class="btn btn-sm btn-primary" id="endpoint-submit" th:text="${endpointForm.id == null ? 'Create' : 'Update'}">Create</button>
<a th:href="@{{deviceAction} (deviceAction=${endpointForm.id == null ? 'endpoints.mvc' :'/endpoints/'+endpointForm.id+'/devices.mvc'})}" title="Cancel" class="btn btn-sm btn-primary">Cancel</a>
</form>
</div>
</body>
</html>
$(document).ready(function() {
$('#endpoint-form')
.on('change','#start_select1', function() {
//.on('change','#country', function() {
let countryid = $("#start_select1").val();
$.getJSON( "/" + contextRoot + "/provinces-json.mvc?id="+countryid, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select2').html(items.join(""));
});
$.getJSON( "/" + contextRoot + "/states-json.mvc?id="+countryid, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select3').html(items.join(""));
});
$('#start_select4').html("");
document.getElementById("timezoneName").value ="";
})
.on('change','#start_select2', function() {
//.on('change','#province', function() {
let provinceID = $(this).val();
let stateID = 0;
let countryid = $('#start_select1').val();
$.getJSON( "/" + contextRoot + "/cities-json.mvc?id="+countryid+"&provinceID="+provinceID+"&stateID="+stateID, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select4').html(items.join(""));
});
})
.on('change','#start_select3', function() {
//.on('change','#state', function() {
let stateID = $(this).val();
let provinceID = 0;
let countryid = $('#start_select1').val();
$.getJSON( "/" + contextRoot + "/cities-json.mvc?id="+countryid+"&provinceID="+provinceID+"&stateID="+stateID, function( data ) {
let items = [];
$.each( data, function( key, value ) {
console.log(value);
items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
});
$('#start_select4').html(items.join(""));
});
})
.on('change','#start_select4', function() {
//.on('change','#city', function() {
let cityID = $(this).val();
$.getJSON( "/" + contextRoot + "/timezone-json.mvc?cityID="+cityID, function( data ) {
if(data !=null){
console.log(data.name);
//$('#timezoneName').html(data.name);
document.getElementById("timezoneName").value = data.name;
}
//let items = [];
//$.each( data, function( key, value ) {
//console.log(value);
//items.push( "<option value='" + value.id + "'>" + value.name + "</option>" );
// });
//$('#timezoneName').html(items.join(""));
});
})
.on("click","#endpoint-submit",function(e) {
e.preventDefault();
confirmAdd(dataToParams($('#endpoint-form').data(),$(this).data()));
});
});
@RequestMapping(value = "/provinces-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public List<Province> getProvinceInJSON(@RequestParam(value="id", required = false) Long countryID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
List<Province> province;
logger.info("get province,countryID:"+ countryID);
if (countryID != null) {
province = provinceRepository.searchByCountryIdAndFetchProvince(countryID);
}else{
province = null;
}
return province;
}
@RequestMapping(value = "/states-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public List<State> getStateInJSON(@RequestParam(value="id", required = false) Long countryID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
List<State> state;
logger.info("get state,countryID:"+ countryID);
if (countryID != null) {
state = stateRepository.searchByCountryIdAndFetchState(countryID);
}else{
state = null;
}
return state;
}
@RequestMapping(value = "/cities-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public List<City> getCityInJSON(@RequestParam(value="id", required = false) Long countryID,
@RequestParam(value="provinceID", required = false) Long provinceID,
@RequestParam(value="stateID", required = false) Long stateID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
List<City> city;
logger.info("get city,countryID:"+ countryID);
logger.info("get city,provinceID:"+ provinceID);
logger.info("get city,stateID:"+ stateID);
if (provinceID > 0 ) {
city = cityRepository.searchByProvinceIdAndFetchCity(provinceID);
}else{
city = cityRepository.searchByStateIdAndFetchCity(stateID);
}
return city;
}
@RequestMapping(value = "/timezone-json", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public Timezone getTimezoneInJSON(
@RequestParam(value="cityID", required = false) Long cityID,
@PageableDefault(sort = "model.model", direction = Sort.Direction.ASC) Pageable pageable,
Model model, HttpServletRequest request, HttpSession session) {
logger.info("get timezone,cityID:"+ cityID);
if (cityID > 0 ) {
Timezone timezone = timezoneRepository.searchByCityIdAndFetchTimezone(cityID);
logger.info("timezone:"+ timezone.getName());
return timezone;
}else{
return null;
}
}
下一篇： thymeleaf