Thymeleafで繰り返し属性th:eachを使用する
当サイトはアフィリエイト広告を利用しています。
Thymeleafを書籍で学びたい方やThymeleafと一緒にSpringも習得したい方におすすめな書籍です。
Springについての書籍ですが、Thymeleafの基本構文や他システムとの連携など30ページほど取り上げられています。
ThymeleafとSpringは親和性の高い技術なので、これを機にSpringを学んでみるのはいかがでしょうか？
ポチップ
実行環境
実行環境がない方は、こちらの記事を参考にしてください。
| 項目 | バージョン |
|---|---|
| OS | macOS Catalina |
| JDK | Oracle JDK@8 |
| Thymeleaf | 3.1 |
Thymeleafで繰り返し属性th:eachを使用する
th:each="要素を格納する変数 : ${リスト}" で繰り返し処理を実装することができます。
リストから要素を取り出し、変数に要素を格納して値を表示します。
<ul>
<th:block th:each="user : ${users}">
<li th:text="${user.name}"></li>
</th:block>
</ul>テーブルを実装する
テーブル
th:if="${!#lists.isEmpty(users)}" でリストが空でないか判断し、空でなかった場合 th:each="user : ${users}" でリストの要素を user という変数に格納します。格納後、 th:text="${user.フィールド名}" で値を表示します。
th:if はこちらの記事、#lists はこちらの記事で紹介しています。
<table>
<thead>
<tr>
<th>社員番号</th>
<th>氏名</th>
<th>部署</th>
<th>役職</th>
</tr>
</thead>
<tbody>
<tr th:if="${!#lists.isEmpty(users)}" th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.department}"></td>
<td th:text="${user.position}"></td>
</tr>
</tbody>
</table>要素数を指定したテーブル
th:each="i : ${#numbers.sequence(0, 2)}" で0〜2を i に格納します。th:if="${#lists.size(users) > startIndex + i}" で表示する要素が存在するか判断し、表示する要素が存在する場合 th:text="${users[startIndex + i].フィールド名}" で値を表示します。ここでは3行表示されます。
th:if はこちらの記事、#lists や #numbers はこちらの記事で紹介しています。
<table>
<thead>
<tr>
<th>社員番号</th>
<th>氏名</th>
<th>部署</th>
<th>役職</th>
</tr>
</thead>
<tbody>
<tr th:if="${!#lists.isEmpty(users)}" th:each="i : ${#numbers.sequence(0, 2)}">
<th:block th:if="${#lists.size(users) > startIndex + i}">
<td th:text="${users[startIndex + i].id}"></td>
<td th:text="${users[startIndex + i].name}"></td>
<td th:text="${users[startIndex + i].department}"></td>
<td th:text="${users[startIndex + i].position}"></td>
</th:block>
</tr>
</tbody>
</table>ラジオボタンとチェックボックスを実装する
th:each を使用してラジオボタンとチェックボックスを実装することができます。
こちらの記事で紹介しています。
ドロップダウンリストを実装する
th:each を使用してドロップダウンリストを実装することができます。
こちらの記事で紹介しています。
お疲れさまでした
Thymeleafで繰り返し属性th:eachを使用する方法を紹介しました。
少しでも参考になれば幸いです。