読者です 読者をやめる 読者になる 読者になる

アラカン"BOKU"のITな日常

人事評価と人工知能について考えたことがメインテーマです。

STS 3.8.3(Spring Boot 1.5.1)+thymeleaf 一覧表の出力をやってみる

Spring Boot入門 プログラミング

Spring Boot + thymeleafで、基本的なデータ出力画面を構成する方法をもう少し覚えていこうと思います。

 

前回で単純なStringデータを表示するのはやったので、今回はオブジェクトをListで渡して一覧表を表示するのをやってみます。

 

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

 

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

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

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

 

リストを生成しているgetPersonBeanList()はこんな感じです。PIDとNAMEとVALUEの3つの項目だけもっている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はこう書けばいいみたいです。

<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から取り出す1つずつのオブジェクトを受けるための名前です。

 

なので、例えば、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の設定はこうしてみました。

table { border-collapse: collapse; }

td {  border: thin solid black; }

th { border: thin solid black; }


.odd{  background-color:white; }

.even{  background-color:aliceblue; }

 

実行してみました。

f:id:arakan_no_boku:20170310220850j:plain

 

なんとかいけてるみたいですね。