英文:
Display multiple rows in Thymeleaf table
问题
我正试图在Spring Boot应用程序中使用Thymeleaf创建一个活动参与者表格。
我的表格如下所示：
<table class="table table-bordered tabl-striped"><thead class="thead-dark"><th>First Name</th><th>Last Name</th></thead><tbody><tr th:each="tempEvent : ${event}"><td th:text="${tempEvent.clubEventAttendees[event].firstName}" /><td th:text="${tempEvent.clubEventAttendees[event].lastName}" /></tr></tbody></table>
如果我只使用单个td，例如 <td th:text="${tempEvent.clubEventAttendees}" />，我会得到以下结果：
[EventAttendees [id=1, firstName=Paul, lastName=Jones], EventAttendees [id=2, firstName=Luke, lastName=Smyth]
这个输出包含了正确的数据。然而，上面的表格只输出了第二个参与者（Luke Smyth）。如果我将td的行更改为：
<td th:text="${tempEvent.clubEventAttendees[0].firstName}" /><td th:text="${tempEvent.clubEventAttendees[0].lastName}" />
或者
<td th:text="${tempEvent.clubEventAttendees[1].firstName}" /><td th:text="${tempEvent.clubEventAttendees[1].lastName}" />
根据位置显示了正确的人员。我如何更改我的表格以显示返回的任何参与者？
这是我的Event模型：
@Entity@Table(name="club_events")public class Event {@OneToMany(mappedBy="clubEvent",cascade={CascadeType.PERSIST, CascadeType.MERGE,CascadeType.DETACH, CascadeType.REFRESH,CascadeType.REMOVE})private List<EventAttendees> clubEventAttendees;// 定义字段@Id@GeneratedValue(strategy=GenerationType.IDENTITY)@Column(name="id")private int id;@Column(name="name")private String name;@Column(name="location")private String location;@Column(name="description")private String description;@DateTimeFormat(pattern="yyyy-MM-dd")@Column(name="date_time")private LocalDate dateTime;public Event() {}public Event(int id, String name, String location, String description, LocalDate dateTime) {super();this.id = id;this.name = name;this.location = location;this.description = description;this.dateTime = dateTime;}}
这是我的EventAttendees模型：
@Entity@Table(name="club_event_attendees")public class EventAttendees {@ManyToOne(cascade= {CascadeType.PERSIST, CascadeType.MERGE,CascadeType.DETACH, CascadeType.REFRESH})@JoinColumn(name="club_event_id")private Event clubEvent;// 定义字段@Id@GeneratedValue(strategy=GenerationType.IDENTITY)@Column(name="id")private int id;@Column(name="first_name")private String firstName;@Column(name="last_name")private String lastName;@Column(name="phone")private String phone;@Column(name="mobile")private String mobile;public EventAttendees() {}public EventAttendees(int id, String firstName, String lastName, String phone, String mobile, int clubEventId) {super();this.id = id;this.firstName = firstName;this.lastName = lastName;this.phone = phone;this.mobile = mobile;}}
注意：已删除getter和setter方法。
我目前有一个页面列出了所有事件（在一个表格中）：
一旦我弄清楚了这个问题，"Attendees" 列将会被移除，但如果点击 "View Attendees" 按钮，我希望被带到一个包含类似表格的页面，其中包含所有参与者的firstName、lastName、phone和mobile信息。基本上，我想将 clubEventAttendees 中返回的数据显示在类似上面表格的页面中。
英文:
I'm trying to create a table of attendees of my event using Thymeleaf on a Spring Boot app.
My table looks like this:
<table class="table table-bordered tabl-striped"><thead class="thead-dark"><th>First Name</th><th>Last Name</th></thead><tbody><tr th:each="tempEvent : ${event}"><td th:text="${tempEvent.clubEventAttendees[event].firstName}" /><td th:text="${tempEvent.clubEventAttendees[event].lastName}" /></tr></tbody></table>
If I just use a single td with <td th:text="${tempEvent.clubEventAttendees}" /> I get this:
[EventAttendees [id=1, firstName=Paul, lastName=Jones], EventAttendees [id=2, firstName=Luke, lastName=Smyth]
This output contains the correct data. The above table however only outputs my second attendee(Luke Smyth). If I change the td lines to:
<td th:text="${tempEvent.clubEventAttendees[0].firstName}" /><td th:text="${tempEvent.clubEventAttendees[0].lastName}" />
or
<td th:text="${tempEvent.clubEventAttendees[1].firstName}" /><td th:text="${tempEvent.clubEventAttendees[1].lastName}" />
The correct person is displayed depending on their position. How can I change my table to display any attendees that get returned?
This is my Event model:
@Entity@Table(name="club_events")public class Event {@OneToMany(mappedBy="clubEvent",cascade={CascadeType.PERSIST, CascadeType.MERGE,CascadeType.DETACH, CascadeType.REFRESH,CascadeType.REMOVE})private List<EventAttendees> clubEventAttendees;// define fiends@Id@GeneratedValue(strategy=GenerationType.IDENTITY)@Column(name="id")private int id;@Column(name="name")private String name;@Column(name="location")private String location;@Column(name="description")private String description;@DateTimeFormat(pattern="yyyy-MM-dd")@Column(name="date_time")private LocalDate dateTime;public Event() {}public Event(int id, String name, String location, String description, LocalDate dateTime) {super();this.id = id;this.name = name;this.location = location;this.description = description;this.dateTime = dateTime;}}
This is my EventAttendees model:
@Entity@Table(name="club_event_attendees")public class EventAttendees {@ManyToOne(cascade= {CascadeType.PERSIST, CascadeType.MERGE,CascadeType.DETACH, CascadeType.REFRESH})@JoinColumn(name="club_event_id")private Event clubEvent;// define fiends@Id@GeneratedValue(strategy=GenerationType.IDENTITY)@Column(name="id")private int id;@Column(name="first_name")private String firstName;@Column(name="last_name")private String lastName;@Column(name="phone")private String phone;@Column(name="mobile")private String mobile;public EventAttendees() {}public EventAttendees(int id, String firstName, String lastName, String phone, String mobile, int clubEventId) {super();this.id = id;this.firstName = firstName;this.lastName = lastName;this.phone = phone;this.mobile = mobile;}}
Note: getters and setters have been removed.
I currently have a page which lists all events(in a table):
The Attendees column will be removed once I get this figured out but if the View Attendees button is clicked I'd like to be taken to a page containing a similar table but with the firstName, lastName, phone and mobile of all attendees. Basically, I'd like to take the data returned in clubEventAttendees and display it in a table similar to the table above.
答案1
得分: 1
好的，以下是您要翻译的内容：
好的，如承诺所示，这是代码。
我可以解释一下关于 Person 和 Car 的示例。想法是 Person 拥有 List<Car>。
在点击 View Cars 后，会打开一个新页面，您会看到一个汽车列表。
实现这个的方法相当简单。在从 modelAttribute 为 people 渲染 List<Person> 时，您可以使用以下代码
<tr th:each="person : ${people}"><td th:text="${person.id}"></td><td th:text="${person.firstName}"></td><td th:text="${person.lastName}"></td><td><a th:href="@{'/person/' + ${person.id} + '/cars'}">View Cars</a></td></tr>
th:href="{'/person/' + ${person.id} + '/cars'}" 中的 Href 会执行控制器中的以下方法
@GetMapping("/person/{personId}/cars")public String getCars(Model model, @PathVariable Integer personId){model.addAttribute("cars", carRepository.findAllByPersonId(personId));return "web/car-list";}
之后会渲染一个新的模板。我在 GitHub 上上传了源代码，可以在这里找到：https://github.com/Prebiusta/thymeleaf-playground
希望对您有所帮助，如果还有其他问题，请告诉我。
英文:
Okay so as promised, here is the code.
I can explain the example with Person and Car. The idea is that Person has List<Car>.
After pressing on View Cars, a new page is opened, where you see a list of Cars.
How to achieve this is fairly simple. When rendering List<Person> from modelAttribute people, you can use the following code
<tr th:each="person : ${people}"><td th:text="${person.id}"></td><td th:text="${person.firstName}"></td><td th:text="${person.lastName}"></td><td><a th:href="@{'/person/' + ${person.id} + '/cars'}">View Cars</a></td></tr>
Href from th:href="@{'/person/' + ${person.id} + '/cars'}" executed following method in controller
@GetMapping("/person/{personId}/cars")public String getCars(Model model, @PathVariable Integer personId){model.addAttribute("cars", carRepository.findAllByPersonId(personId));return "web/car-list";}
after which a new template is rendered. I uploaded source code on GitHub, it can be found here https://github.com/Prebiusta/thymeleaf-playground
Hope it helps, let me know if there is something else.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论