Question

我想使用Spring和Thymeleaf创建一个具有多个搜索选项的页面。

类似这样的东西：

-----------------------------------------------
SEARCH BY:

NAME         TIME          ZIP CODE         AGE
-----------------------------------------------

我希望这些选项是可单击的（以链接或按钮的形式），当单击它们时，我希望在选项下方打开一个搜索表单，其中带有用于名称或邮政编码的搜索栏。，以及用于时间搜索的日期选择器。当然，单击其他选项会将上一个搜索表单从页面中移出并打开单击的搜索表单。

赞：

------------------------------------------------
//clicked on name:

ENTER NAME: ____________       SEARCH
------------------------------------------------
------------------------------------------------
//clicked on time:
(this form to replace the previous one)

SELECT TIME: _____________     SEARCH
------------------------------------------------

老实说，我什么都没尝试，因为我不知道从哪里开始。

任何人都可以向我正确地指导使用什么，或者向我展示他们将如何使用它？

编辑：

因此，正如我在评论中所写，我制作了一个页面，其中包含指向其他页面的链接：

indexSearch.html

    <h1>Search</h1>

    <h3>Search type:</h3>

    <p><a th:href="@{/searchByName}">NAME</a></p>
    <p><a th:href="@{/searchByTime}">TIME</a></p>
    <p><a th:href="@{/searchByZipCode}">ZIP CODE</a></p>
    <p><a th:href="@{/searchByAge}">AGE</a></p>

</body>

searchByName.html

<body>

    <h1>Search by name</h1>

    <form th:object="${event}" method="post">
        <div>
            <label for="name" >Name: </label>
            <input type="text" name="name" th:field="*{name}">
            <input type="submit" th:value="Search">
        </div>
    </form>

    <table>
        <tr>
            <th>Name</th>
            <th>Time</th>
            <th>Zip Code</th>
            <th>Age</th>
        </tr>
        <tr th:each="event : ${events}">
            <td><span th:text="${event.name}" >EVENT.NAME</span></td>
            <td><span th:text="${#temporals.format(event.time, 'MM-dd-yyyy HH:mm')}" >EVENT.TIME</span></td>
            <td><span th:text="${event.zipCode}" >EVENT.ZIPCODE</span></td>
            <td><span th:text="${event.age}" >EVENT.AGE</span></td>
        </tr>

    </table>

</body>

正在通过控制器中的@GetMapping和@PostMapping方法处理页面：

eventController.java

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

    model.addAttribute("event", new Event());

    return "searchByName";
}

@PostMapping("/searchByName")
public String searchByName(Event event, Model model, String name) {

    List<Event> events = eventRepository.findByNameIgnoreCaseContaining(name);
    model.addAttribute("events", events);

    return "searchByName";
}

由于通过在每一页上按Search来处理它们，是否有可能将所有搜索表单放在一页上？至少不是我的观点，我认为这不是。

Thymeleaf中的多选搜索表单（带有Spring）

0 个答案: