【问题标题】:Display multiple rows in Thymeleaf table在 Thymeleaf 表中显示多行
【发布时间】:2020-10-15 21:18:02
【问题描述】:

我正在尝试在 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>

如果我只使用带有 &lt;td th:text="${tempEvent.clubEventAttendees}" /&gt; 的单个 td,我会得到:

[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}" />

根据他们的位置显示正确的人。如何更改我的表格以显示任何返回的与会者?

这是我的事件模型:

@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;
    }
}

这是我的 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;

    // 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;
    }

}

注意:getter 和 setter 已被移除。

我目前有一个列出所有事件的页面(在表格中):

一旦我弄清楚了,与会者列将被删除,但如果单击查看与会者按钮,我希望被带到一个包含类似表格但包含所有与会者的名字、姓氏、电话和手机的页面.基本上,我想把 clubEventAttendees 中返回的数据,显示在一个类似于上表的表格中。

【问题讨论】:

  • 你需要添加你的模型,看看有哪些变量类型
  • 您能否详细说明您实际想要显示的内容? clubEventAtendessevent 都是你想要显示的吗?如果你能提供响应应该是什么样子的例子
  • @Prebiusta 我在问题的底部添加了一些细节。
  • 在这种情况下我会做什么,我会创建&lt;a th:href="@{'/event/' + ${tempEvent.id} + '/attendees'}"&gt;View Attendees&lt;/a&gt;,然后在控制器中的某个地方我会写@GetMapping("/event/{eventId}/attendees")。在这个控制器方法中,我将访问数据库并获取路径变量中给定事件 ID 的用户,并返回新的模板 HTML 文件。这会是您想要实现的目标吗?我可以写一个例子
  • 是的,这听起来正是我想要的。

标签: java spring-boot thymeleaf


【解决方案1】:

好的,按照承诺,这里是代码。

我可以用PersonCar 来解释这个例子。这个想法是PersonList&lt;Car&gt;

按下查看汽车后,会打开一个新页面,您可以在其中看到汽车列表。

如何实现这一点相当简单。当从modelAttribute people渲染List&lt;Person&gt;时,可以使用如下代码

<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

希望对你有帮助,如果有其他问题请告诉我。

【讨论】:

  • 很好的答案。感谢您花时间为我弄到那个。非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-11
  • 2022-09-23
  • 2018-01-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多