체크박스

1. Item 도메인에 체크를 하고 난 뒤 담길 필드를 추가합니다.

package shoppingproject.shop.domain.item;

import lombok.Getter;
import lombok.RequiredArgsConstructor;
import lombok.Setter;
import org.springframework.web.bind.annotation.ModelAttribute;
import shoppingproject.shop.domain.common.BaseEntity;
import shoppingproject.shop.domain.common.UploadFile;

import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

@Getter
@Setter
public class Item extends BaseEntity {
 private Long Id;
 private String ItemName;
 private Integer Price;
 private String Description;
 private List<UploadFile> imageFiles;
 private List<String> sizeList; // 체크박스가 담길 필드추가
 private List<String> colorList; // 체크박스가 담길 필드추가


}

2. Controller 에 color, size 의 컬렉션을 생성합니다.

이때 @ModelAttribute("colors") 를 추가하면 해당 컨트롤러에서 사용가능하고 이렇게 담긴 데이터는 화면에서 사용가능합니다.

@ModelAttribute("colors")
public Map<String, String> Colors() {
    Map<String, String> colors = new LinkedHashMap<>();
        colors.put("red","red");
        colors.put("yellow","yellow");
        colors.put("blue","blue");
        colors.put("black","black");
        colors.put("white","white");
     return colors;
    }

@ModelAttribute("sizes")
public Map<String, String> sizes() {
    Map<String, String> sizes = new LinkedHashMap<>();
    sizes.put("s","s");
    sizes.put("m","m");
    sizes.put("l","l");
    return sizes;
}

3. 화면에 적용

<div class="form-group col-md-6 mb-3">
    <label for="Description" >상품 색상</label>
    <div th:each="color : ${colors}" class="form-check form-check-inline">
        <input type="checkbox" th:field="*{colorList}" th:value="${color.key}" class="form-check-input">
        <label th:for="${#ids.prev('colors')}" th:text="${color.value}" class="form-check-label"></label>
    </div>

</div>

 1) th:for="${#ids.prev('colors')}"  :    each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여준다.

(나는 적용이 안되서 일단 빼고  조금더 찾아봐야겟다.)

 2) th:each="color : ${colors}" :  ${colors} 는 컨트롤러에서 @modelAttribute에서 추가한 데이터를 뿌려준다.

 3) th:field=*{colorList} : item 객체의 colorList의 필드이며  선택된 데이터를 여기에 담아준다.

4) th:value="${color.key}" : color의 키값을 담아준다.

 5) th:text=${color.value} : color의 값을 표시한다.

 

잘 나오는 것을 확인할 수 있다.