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

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うこと。

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 STS 3.8.3(Spring Boot 1.5.1)+thymeleaf 

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

 

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

 

 


 STS  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。