参照画面：テーブルを使い、行毎に色分けした一覧表を表示する。　STS３＋Spring Boot＋thymeleaf

Spring Boot + thymeleafで、オブジェクトをListで渡して一覧表を表示してみます。

STS3（3.9.6）とSpringBoot2.0＋tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

一覧表表示

せっかくなので、一覧表の奇数行と偶数行で色を変えてみます。

コントローラクラス

まず、Java側ですね。

Controllerクラスで,addAttributeすれば良いのは、Stringの時と同じです。

@RequestMapping("/hello")
public String hello(Model model) {

model.addAttribute("personList",getPersonBeanList());
return "hello";
}

リストを生成しているgetPersonBeanList()はこんな感じです。PIDとNAMEとVALUEの３つの項目だけもっているPersonBeanというオブジェクトをループで10個生成し、Listにつめて返しているだけです。

private List<PersonBean> getPersonBeanList(){

List<PersonBean> personList = new ArrayList<PersonBean>();
for(int i = 0;i <= 10;i++){
PersonBean pb = new PersonBean();
pb.setPid(Integer.valueOf(i).toString());
pb.setName("テスト　太郎 " + Integer.valueOf(i).toString());
pb.setValue("格納と取り出しのテスト " + Integer.valueOf(i).toString());
personList.add(pb);
}

return personList;

}

受け側のHTML

それに対する受け側のHTMLはこう書けばいいみたいです。

<table>
<tr>
<th>NO</th>
<th>PID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr th:each="person,iterStat : ${personList}">
<td th:class="${iterStat.odd}? 'odd' : 'even'" th:text="${iterStat.count}"></td>
<td th:class="${iterStat.odd}? 'odd' : 'even'" th:text="${person.pid}"></td>
<td th:class="${iterStat.odd}? 'odd' : 'even'" th:text="${person.name}"></td>
<td th:class="${iterStat.odd}? 'odd' : 'even'" th:text="${person.value}"></td>
</tr>
</table>

ループの肝は、th:each="person,iterStat : ${personList}" です。

これによって、Javaから渡されたpersonListを受け取って、Listに格納されている数だけループを回してくれます。

personは、personListから取り出す１つずつのオブジェクトを受けるための名前です。

なので、例えば、th:text="${person.name}"　で、名前を取り出して表示することができるんですね。

面白いのが、その後ろの「iterStat」です。

実は、th:each="person,iterStat : ${personList}"　のように書くと、iterStatに以下のようなメタ情報をセットしてくれます。

index　：　現在の繰り返しのインデックス（0から開始）
count　：　現在の繰り返しのインデックス（1から開始）
size　　：　繰り返し対象の総件数
odd　　：　現在の繰り返し処理が奇数回かどうか？
even　　：　現在の繰り返し処理が偶数回かどうか？
first　　：　現在の繰り返し処理が初回かどうか？
last　　：　現在の繰り返し処理が最後かどうか？

なので、 th:class="${iterStat.odd}? 'odd' : 'even'"　とすることで、奇数回なら、'odd'、でなければ　'even'　をclassにセットすることで背景色を変更できるわけですね。

CSS

ちなみにCSSの設定はこうしてみました。

table { border-collapse: collapse; }

td { border: thin solid black; }

th { border: thin solid black; }

.odd{ background-color:white; }

.even{ background-color:aliceblue; }