thymeleaf

maxer025

浏览: 79560 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

wangyy

cutecoot

kevin.shi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

thymeleaf 分页级联

分页级联

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="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 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 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 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 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;
    }
    }

分享到：