Thymeleaf Table rowspan 问题(1 个订单,N 篇文章)
Thymeleaf Table issues with rowspan (1 Order, N Articles)
我正在为订购系统制作一个简单的 Intranet Web 视图,以显示当前处理的所有订单。但是我坚持使用 thymeleaf 标记:
public class Order {
private Factory factory;
private String orderNumber;
private Date orderDate;
....
private List<Article> articles;
}
public class Article {
private String number;
private String name;
}
我想要完成的是以下内容(1 个订单 + 3 篇文章):
<table class="table table-striped table-hover table-middle table-condensed table-bordered">
<thead>
<tr>
<th>OrderNr</th>
<th>Date</th>
<th>Article Number</th>
<th>ArticleName</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Order 32</td>
<td rowspan="3">27.03.2020</td>
<td>17442</td>
<td>Screws</td>
</tr>
<tr>
<td>023423</td>
<td>Potatoe</td>
</tr>
<tr>
<td>32342</td>
<td>YetAnotherItem</td>
</tr>
</tbody>
</table>
所有常见的东西都应该在所有文章中跨行,并且文章应该每行查看一篇。但是我不知道如何用两个 th:each(一个用于订单,一个用于订单的文章)来实现这一点。我可以 "flatten" 在标记中使用大量 ifs 来显示我的视图(每行由一个 Line-Object 表示),但在我看来这是一个非常肮脏的 hack-around...
谁能帮我出一个更好的解决方案?
非常感谢!
<table>
<thead>
<tr>
<th>OrderNr</th>
<th>Date</th>
<th>Article Number</th>
<th>ArticleName</th>
</tr>
</thead>
<tbody>
<div th:remove="tag" th:each="order:${orderList}"
th:with="articleCount=${order.articleList.size()}">
<tr>
<td th:text="${order.orderNumber}" th:rowspan="${order.articleList.size()}"></td>
<td th:text="${order.orderDate}" th:rowspan="${order.articleList.size()}"></td>
<td th:text="${articleCount>0}?${order.articles[0].number}:''"></td>
<td th:text="${articleCount>0}?${order.articles[0].name}:''"></td>
</tr>
<tr th:each="article,stats:${order.articles}" th:if="${!stats.first}">
<td th:text="${article.number}"></td>
<td th:text="${article.name}"></td>
</tr>
</div>
</tbody>
</table>
th:remove="tag"
用于在 table 生成后删除 div
。
已更改以避免出现渲染问题。感谢@Martin C.
我正在为订购系统制作一个简单的 Intranet Web 视图,以显示当前处理的所有订单。但是我坚持使用 thymeleaf 标记:
public class Order {
private Factory factory;
private String orderNumber;
private Date orderDate;
....
private List<Article> articles;
}
public class Article {
private String number;
private String name;
}
我想要完成的是以下内容(1 个订单 + 3 篇文章):
<table class="table table-striped table-hover table-middle table-condensed table-bordered">
<thead>
<tr>
<th>OrderNr</th>
<th>Date</th>
<th>Article Number</th>
<th>ArticleName</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Order 32</td>
<td rowspan="3">27.03.2020</td>
<td>17442</td>
<td>Screws</td>
</tr>
<tr>
<td>023423</td>
<td>Potatoe</td>
</tr>
<tr>
<td>32342</td>
<td>YetAnotherItem</td>
</tr>
</tbody>
</table>
所有常见的东西都应该在所有文章中跨行,并且文章应该每行查看一篇。但是我不知道如何用两个 th:each(一个用于订单,一个用于订单的文章)来实现这一点。我可以 "flatten" 在标记中使用大量 ifs 来显示我的视图(每行由一个 Line-Object 表示),但在我看来这是一个非常肮脏的 hack-around...
谁能帮我出一个更好的解决方案?
非常感谢!
<table>
<thead>
<tr>
<th>OrderNr</th>
<th>Date</th>
<th>Article Number</th>
<th>ArticleName</th>
</tr>
</thead>
<tbody>
<div th:remove="tag" th:each="order:${orderList}"
th:with="articleCount=${order.articleList.size()}">
<tr>
<td th:text="${order.orderNumber}" th:rowspan="${order.articleList.size()}"></td>
<td th:text="${order.orderDate}" th:rowspan="${order.articleList.size()}"></td>
<td th:text="${articleCount>0}?${order.articles[0].number}:''"></td>
<td th:text="${articleCount>0}?${order.articles[0].name}:''"></td>
</tr>
<tr th:each="article,stats:${order.articles}" th:if="${!stats.first}">
<td th:text="${article.number}"></td>
<td th:text="${article.name}"></td>
</tr>
</div>
</tbody>
</table>
th:remove="tag"
用于在 table 生成后删除 div
。
已更改以避免出现渲染问题。感谢@Martin C.