Spring boot Thymeleaf заполнить выпадающий список на основе других вариантов выпадающего списка - PullRequest
Новая
       2

Spring boot Thymeleaf заполнить выпадающий список на основе других вариантов выпадающего списка

1 голос
/ 03 июня 2019

Как я могу заполнить выпадающий список на основе выбора других выпадающих списков?

У меня есть класс Unit, класс Size и класс City.Пользователь должен сначала выбрать страну из выпадающего списка стран, затем список муниципалитетов будет отображать только муниципалитеты в этой стране, после чего пользователь должен выбрать размер города, а в конце всего этого пользователь должен выбратьгород из списка городов выбранного размера и принадлежащих выбранному муниципалитету и стране.

Мой код:

Unit.java 

public class Unit {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    private String name

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private UnitType unitType;

    @OneToOne
    @JoinColumn
    private Unit unit;

    @OneToMany(mappedBy = "unit", cascade = CascadeType.ALL)
    private Set<City> cities;
}

UnitType.java 

public class UnitType {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    @Enumerated(EnumType.STRING)
    private UnitName uName;

    @OneToMany(mappedBy = "unitType", cascade = CascadeType.ALL)
    private Set<Unit> units;

    public enum UnitName {

        COUNTY, MUNICIPALITY
    }
}

CitySize.java 

public class CitySize {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name="naziv", nullable=false)
    @Enumerated(EnumType.STRING)
    private Size name;

    @OneToMany(mappedBy = "citySize", cascade = CascadeType.ALL)
    private Set<City> sizes;

    public enum Size {

        SMALL, MEDIUM, LARGE
    }
}

City.java 

public class City {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    private String name;

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private CitySize citySize;

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private Unit unit;

    @OneToMany(mappedBy = "city", cascade = CascadeType.ALL)
    private Set<Event> events;
}

Event.java 

public class Event {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    private String name;

    @Column(nullable=false)
    private LocalDateTime time;

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private City city;

}

EventController.java

public class EventController {

    ....
    @GetMapping("/citySearch")
    public String citySearch(Model model) {

        model.addAttribute("event", new Event());
        model.addAttribute("unit", new Unit());
        model.addAttribute("citySize", new CitySize());
        model.addAttribute("counties", unitRepository.findByUnitTypeId(50001L));
        model.addAttribute("municipalities", unitRepository.findByUnitTypeId(50002L));
        model.addAttribute("sizes", CitySize.Size.values());
        model.addAttribute("cities", cityRepository.findAll());

        return "citySearch";
    }

    @PostMapping("/citySearch")
    public String citySearch(Event event, Model model, City city, Unit unit,
        CitySize citySize) {

        List<Event> foundEvents = eventRepository.findByCity(city);
        model.addAttribute("unit", new Unit());
        model.addAttribute("citySize", new CitySize());
        model.addAttribute("counties", unitRepository.findByUnitTypeId(50001L));
        model.addAttribute("municipalities", unitRepository.findByUnitTypeId(50002L));
        model.addAttribute("sizes", CitySize.Size.values());
        model.addAttribute("cities", cityRepository.findAll());
        model.addAttribute("foundEvents", foundEvents);

        return "citySearch";
    }
}

citySearch.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" >

        <title>City search</title>
    </head>
    <body>

        <h1>Event search by city</h1>

        <form th:object="${unit}" method="post">

        <div class="form-group">
                <label for="unit">County: </label>
                <select th:id="countyOption" th:field="*{unit}">
                    <option value="" >choose counties</option>
                    <option th:each="county : ${counties}" th:value="${county.id}" th:text="${county.name}"></option>
                </select>
            </div>

            <div class="form-group">
                <label for="unit">Municipality: </label>
                <select th:id="municipalityOption" th:field="*{unit}">
                    <option value="" >choose municipilaties</option>
                    <option th:each="municipality : ${municipilaties}" th:value="${municipality.id}" th:text="${municipality.name}"></option>
                </select>
            </div>
        </form>

        <form th:object="${citySize}" method="post">

        <div class="form-group">
                <label for="name">City size: </label>
                <select th:field="*{name}">
                    <option value="" >choose a city size</option>
                    <option th:each="name : ${sizes}" th:value="${id}" th:text="${name}"></option>
                </select>
            </div>
        </form>

        <form th:object="${event}" method="post">

            <div class="form-group">
                <label for="city">City: </label>
                <select th:field="*{city}">
                    <option value="" >choose cities</option>
                    <option th:each="city : ${cities}" th:value="${city.id}" th:text="${city.name}"></option>
                </select>
            </div>
            <input type="submit" th:value="Search">
        </form>

        <table>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Time</th>
            </tr>
            <tr th:each="event : ${foundEvents}">
                <td><span th:text="${event.name}" >EVENT.NAME</span></td>
                <td><span th:text="${event.city.name}" >CITY.NAME</span></td>
                <td><span th:text="${#temporals.format(event.time, 'dd.MM.yyyy. HH:mm')}" >EVENT.TIME</span></td>
            </tr>

        </table>

        <p><a th:href="@{/search}">Return</a></p>

    </body>
</html>

Пока что мой веб-поиск предоставил информацию о том, что этого нельзя сделать, используя только загрузку Spring и Thymeleaf, только с jQuery.Поскольку я не знаю jQuery, мне потребуются некоторые инструкции о том, как написать и реализовать метод в jQuery.Кроме того, у меня нет класса WebConfig.java, так как он мне пока не нужен в моем приложении, но если он мне нужен сейчас, что он должен содержать?

1 Ответ

0 голосов
/ 03 июня 2019

Spring Boot и Thymeleaf не могут ничего делать на стороне клиента, но вы все равно можете достичь того, что пытаетесь сделать, без Javascript / JQuery:

Вы можете отправить выбранную страну в бэкэнд, где вы рассчитываете возможные муниципалитеты для этой страны, которые вы можете добавить в модель и отображать только те (или отключить все другие параметры). Однако вам придется делать это для каждого шага, ограничивающего параметры, что означает перезагрузку страницы каждый раз, что может быть болезненным для использования.

Если вы хотите выполнить то же самое без перезагрузки страницы, вам придется прибегнуть к некоторому клиентскому коду - это означает Javascript / JQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...