코린이의 기록

[HTML] <form:select> 과 itemValue & itemLabel 본문

javascript,HTML,CSS

[HTML] <form:select> 과 itemValue & itemLabel

코린이예요 2018. 10. 8. 18:15
반응형
1
2
3
4
5
6
7
8
9
<spring:bind path="deviceModelId">
    <div class="control-group ${status.error ? 'error' : ''}">
        <label class="control-label" for="deviceModelId">Device Model ID<font class="required">*</font></label>
        <div class="controls">
            <form:select path="deviceModelId" cssClass="input-large" items="${deviceModels}"  itemValue="deviceModelId" itemLabel="name"/>
            <c:if test="${status.error}"><span class="help-inline">${status.errorMessage}</span></c:if>
        </div>
    </div>
</spring:bind>
cs



line 1 : <spring:bind> : spring:bind는 컨트롤러에서 사용하던 객체를 path 속성과 대응할 경우 바인딩하여 손쉽게 데이터를 뽑아올 수 있도록 한다. 즉 

line 2 : 수직 양식 .control-group 으로 라벨과 입력요소를 둘러싼다.

line 3 : 라벨에 .control-label 클래스를 적용한다. for="deviceModelId"는 label로 묶을 id

line 5 : deviceModelId로 바인딩, items는 컨트롤러에서 find 해온 attribute들을 리스트로 가져온다. attribute name으로  "deviceModels"로 설정해주었는데, items에 이 attribute name이 들어가면된다. 

1
modelMap.addAttribute("deviceModels", deviceModelService.findAll());
cs

itemValue는 해당 item이 선택되었을 때 path에 들어가는 컬럼이 되겠다. 즉 tb_device_model에 deviceModelId에 해당하는 컬럼에 item value가 들어가게된다. itemLabel은 말그대로 Label로 표시될 값인데, modelMap attribute로 가져오는 list는 deviceModel object 전체다. itemLabel을 설정해주지 않으면 DeviceModel object가 가지고있는 모든 데이터를 갖고오게 된다.

itemLabel을 name으로 설정해주면 아래와 같이 원하는 모양으로 표현할 수 있다. 

참고로 name 대신 id로 표현해주고 싶으면 itemLabel="deviceModelId"로 설정해주면 됨.





Reference

https://stackoverflow.com/questions/9210733/use-formselect-tag-with-a-map


반응형
Comments