SpringBoot + Thymeleafでチェックボックスを任意の列で表示
環境
Spring Boot 2.7.11
Java 11
目的
コントローラーから取得したリストを基に任意の列で、チェックボックスを横並びにしたい
実装コード
<div class="form-group row"> <details> <summary>LIST1</summary> <table style="margin-left: 60px; width: 90vw"> <tr th:each="i : ${#numbers.sequence(0, list1.size() - 1, 3)}"> <td th:each="value, status : ${list1.subList(i, i + 3 < list1.size() ? i + 3 : list1.size())}" th:style="${list1.size()} >= 3 ? 'width: 30vw;' : (${status.index} % 3 == 0 ? 'width: 15vw;' : 'width: 30vw;')"> <input class="form-check-input" type="checkbox" th:value="${value}"> <label class="form-check-label" th:text="${value}"></label> </td> </tr> </table> </details> </div> <div class="form-group row"> <details> <summary>LIST2</summary> <table style="margin-left: 60px; width: 90vw"> <tr th:each="i : ${#numbers.sequence(0, list2.size() - 1, 3)}"> <td th:each="value, status : ${list2.subList(i, i + 3 < list2.size() ? i + 3 : list2.size())}" th:style="${list2.size()} > 2 ? 'width: 30vw;' : (${status.index} == 0 ? 'width: 15vw;' : 'width: 30vw;')"> <input class="form-check-input" type="checkbox" th:value="${value}"> <label class="form-check-label" th:text="${value}"></label> </td> </tr> </table> </details> </div>
表示画面
説明
上記コードは3列で表示するもの
trタグのeachはコントローラーから受け取ったlist1というリストを3つずつ扱うために、
i : #numbers.sequence(from, to, step)
1のstepを3と指定
Javaでいうfor (int i = 0; i < list1.size() - 1; i+=3)
と同じ
tdタグのeachはJavaの標準メソッドsubList(form, to)
2でlist1を、
要素数が3つずつになるようi+3までeach文を実行する
th:styleの三項演算子は、チェックボックス各々の幅をウィンドウのサイズに応じて、
単純にwidth: 30vw;
で3分割できればよかったのだが、
リストのサイズが2の時だけ1つ目と2つ目のチェックボックスの間が広くなり、
他のグループの項目と2つ目のチェックボックスの位置がずれてしまうため、
一番最初の要素の幅だけ1/6のサイズに指定した
・リストサイズが1の時、幅によって少々ズレることがあったためth:styleの最初の条件を2未満に
注意
時間がなかったために、このような可読性の低いコードをVIEWに書くことになってしまい、
探せばもっと単純で簡単な実装方法があると思います。
- Thymeleafのユーティリティメソッド:Tutorial: Using Thymeleaf (ja)↩
- Java11ドキュメント:List (Java SE 11 & JDK 11 )↩