在Thymeleaf表格中显示多行

huangapple go评论78阅读模式
英文:

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方法。

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

在Thymeleaf表格中显示多行

一旦我弄清楚了这个问题,"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:

&lt;table class=&quot;table table-bordered tabl-striped&quot;&gt;
    &lt;thead class=&quot;thead-dark&quot;&gt;
        &lt;th&gt;First Name&lt;/th&gt;
        &lt;th&gt;Last Name&lt;/th&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr th:each=&quot;tempEvent : ${event}&quot;&gt;
		    &lt;td th:text=&quot;${tempEvent.clubEventAttendees[event].firstName}&quot; /&gt;
			&lt;td th:text=&quot;${tempEvent.clubEventAttendees[event].lastName}&quot; /&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

If I just use a single td with &lt;td th:text=&quot;${tempEvent.clubEventAttendees}&quot; /&gt; 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:

&lt;td th:text=&quot;${tempEvent.clubEventAttendees[0].firstName}&quot; /&gt;
&lt;td th:text=&quot;${tempEvent.clubEventAttendees[0].lastName}&quot; /&gt;

or

&lt;td th:text=&quot;${tempEvent.clubEventAttendees[1].firstName}&quot; /&gt;
&lt;td th:text=&quot;${tempEvent.clubEventAttendees[1].lastName}&quot; /&gt;

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=&quot;club_events&quot;)
public class Event {
	
	@OneToMany(mappedBy=&quot;clubEvent&quot;,
			cascade={CascadeType.PERSIST, CascadeType.MERGE,
					CascadeType.DETACH, CascadeType.REFRESH,
					CascadeType.REMOVE})
	private List&lt;EventAttendees&gt; clubEventAttendees;

	// define fiends
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column(name=&quot;id&quot;)
	private int id;
	
	@Column(name=&quot;name&quot;)
	private String name;
	
	@Column(name=&quot;location&quot;)
	private String location;
	
	@Column(name=&quot;description&quot;)
	private String description;
	
	@DateTimeFormat(pattern=&quot;yyyy-MM-dd&quot;)
	@Column(name=&quot;date_time&quot;)
	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=&quot;club_event_attendees&quot;)
public class EventAttendees {
	
	@ManyToOne(cascade= {CascadeType.PERSIST, CascadeType.MERGE,
			CascadeType.DETACH, CascadeType.REFRESH})
	@JoinColumn(name=&quot;club_event_id&quot;)
	private Event clubEvent;

	// define fiends
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column(name=&quot;id&quot;)
	private int id;

	@Column(name=&quot;first_name&quot;)
	private String firstName;

	@Column(name=&quot;last_name&quot;)
	private String lastName;
	
	@Column(name=&quot;phone&quot;)
	private String phone;
	
	@Column(name=&quot;mobile&quot;)
	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):
在Thymeleaf表格中显示多行

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

好的,以下是您要翻译的内容:

好的,如承诺所示,这是代码。

我可以解释一下关于 PersonCar 的示例。想法是 Person 拥有 List<Car>

在Thymeleaf表格中显示多行

在点击 View Cars 后,会打开一个新页面,您会看到一个汽车列表。

在Thymeleaf表格中显示多行

实现这个的方法相当简单。在从 modelAttributepeople 渲染 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&lt;Car&gt;.

在Thymeleaf表格中显示多行

After pressing on View Cars, a new page is opened, where you see a list of Cars.

在Thymeleaf表格中显示多行

How to achieve this is fairly simple. When rendering List&lt;Person&gt; from modelAttribute people, you can use the following code

&lt;tr th:each=&quot;person : ${people}&quot;&gt;
                &lt;td th:text=&quot;${person.id}&quot;&gt;&lt;/td&gt;
                &lt;td th:text=&quot;${person.firstName}&quot;&gt;&lt;/td&gt;
                &lt;td th:text=&quot;${person.lastName}&quot;&gt;&lt;/td&gt;
                &lt;td&gt;
                    &lt;a th:href=&quot;@{&#39;/person/&#39; + ${person.id} + &#39;/cars&#39;}&quot;&gt;View Cars&lt;/a&gt;
                &lt;/td&gt;
&lt;/tr&gt;

Href from th:href=&quot;@{&#39;/person/&#39; + ${person.id} + &#39;/cars&#39;}&quot; executed following method in controller

@GetMapping(&quot;/person/{personId}/cars&quot;)
public String getCars(Model model, @PathVariable Integer personId){
    model.addAttribute(&quot;cars&quot;, carRepository.findAllByPersonId(personId));
    return &quot;web/car-list&quot;;
}

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.

huangapple
  • 本文由 发表于 2020年10月16日 05:18:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/64379806.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定