SpringBoot/thymeleafで一覧データを受け渡しする

はじめに

SpringBootを初めて使って一覧画面を作った際、値の受け渡しについて調べたことをまとめます。
今回は勤務表の一覧画面を作りましたが、その一部を紹介します。

モデルクラス

画面に表示させる値を保持するクラスです。
とりあえず2項目分用意します。

@Data
public class KinmuhyoModel {
  /**
   * 日.
   */
  private String day;

  /**
   * 曜日.
   */
  private String dayOfWeek;
}

@Data
@Component
public class MakeKinmuModel implements Cloneable {

  /**
   * 勤務表.
   */
  private ArrayList<KinmuhyoModel> kinmuhyoList;
}

MakeKinmuModelクラスに、一覧の各項目の値を持つKinmuhyoModelをList形式で保持させる作りにしています。
ちなみに、SpringBootでは@Dataをクラスに付与するだけで、getter/setterを使えるようになります。

Controllerクラス(GET処理)

@Controller
public class MakeKinmuController {

  @Autowired
  private MakeKinmuService makeKinmuService;
  
  @GetMapping("/makeKinmu")
  public String init(Model model) {
    KinmuhyoModel kinmuhyoModel1 = new KinmuhyoModel();
    kinmuhyoModel1.setDay("1");
    kinmuhyoModel1.setDayOfWeek("月");
    KinmuhyoModel kinmuhyoModel2 = new KinmuhyoModel();
    kinmuhyoModel2.setDay("2");
    kinmuhyoModel2.setDayOfWeek("火");
    ArrayList<KinmuhyoModel> kinmuhyoModelList = new ArrayList<KinmuhyoModel>();
    kinmuhyoModelList.add(kinmuhyoModel1);
    kinmuhyoModelList.add(kinmuhyoModel2);
    
    MakeKinmuModel makeKinmuModel = new MakeKinmuModel();
    makeKinmuModel.setKinmuhyoList(kinmuhyoModelList);
    model.addAttribute("makeKinmuModel", makeKinmuModel);

    return "makeKinmu/makeKinmu";
  }

とりあえず簡易的に、以下のように表示される値をセットします。

日	曜日
1	月
2	火

.html

<form th:action="@{/makeKinmu/output}" th:object="${makeKinmuModel}" method="post">
    <input type="submit" value="送信"　class="outputBtn">
    <table class="kinmuhyo-table">
        <thead>
        	<tr>
        		<th>日</th>
    			<th>曜日</th>
        	</tr>
    	</thead>
    	<tbody>
        	<tr th:each="kinmu,stat : ${makeKinmuModel.kinmuhyoList}" class="align-middle">
        		<th width="50" th:text="${makeKinmuModel.kinmuhyoList[__${stat.index}__].day}"></th>
        		<th width="50" th:text="${makeKinmuModel.kinmuhyoList[__${stat.index}__].dayOfWeek}"></th>
    		</tr>
    	</tbody>
    </table>
</form>

送信ボタンを押下すると、表示された値がPOSTされるようにしています。
th:eachでループ処理を行い、stat.indexで現在のインデックスを取得し、Listから値を取得しています。

#formクラス

@Data
public class MakeKinmuForm {

  /**
   * 日.
   */
  private String[] day;

  /**
   * 曜日.
   */
  private String[] dayOfWeek;
}

POSTされる値を保持するformクラスです。
一覧画面であるため、各値は配列で取得されるようにする必要があります。

Controllerクラス(POST処理)

@PostMapping("/makeKinmu/output")
public String output(@ModelAttribute("makeKinmuModel") MakeKinmuForm formData, Model model) {
    任意の処理
}

POST時に呼ばれるhjava側のメソッドです。
引数のformDataに一覧画面の値が入ることになります。