2013/07/02 15:56

공통코드 list를 이용해 JSP 화면 내 select box 동적 구성 및 선택. HTML/JavaScript/CSS



무슨 상황인지, 바로 눈치 채겠지만..
굳이 설명해 보자면,,
JSP환경(JSTL사용)에서.
List 조회시 사용이라는 필드에 코드값이 들어가 있고,
이게 코드명이 보이도록 변경을 하는 과정인데,
두번째 그림은 하드코딩을 해서 보이는 화면이고,
세번째는 공통코드 리스트를 select box에 바인딩해서
해당 데이터를 보이도록 하는 방법이다.

내 코딩인생이 JSP나 HTML부터였다면
조금더 쉽게, 바로 각이 나왔을지 모르겠지만..
UI툴을 사용하는 것부터 시작하다보니
이렇게 날코딩을 해야하는 상황이 오면
가끔 멘붕에 빠진다..

흔히쓰는 UI툴 같은 경우,
위와 같은 상황에서는 
select component를 하나 올리고,
거기에 조회해온 List dataset 혹은 xml 데이터를 바인딩 해주면 ...... 끝...;;

하지만, 이놈이 JSP라면,
조회해온 List를 이용해서 select 컴포넌트의 option 부분을 직접 생성해줘야 한다.. 

일단,
첫번째 화면의 경우, 코딩은.. 
--------------------------
<td width="123" align="center" > 
<c:out value="${result.useYn }" />
</td>
--------------------------
그냥 리스트의 데이터를 꺼내서 jstl(JSP Standard tag library)로 보여기만 하고 있다.
두번째 화면같이 보여주려면.. 
--------------------------
<td width="123" align="center" > 
<c:choose>
<c:when test="${result.useYn == 'Y'}">사용</c:when>
<c:otherwise>미사용</c:otherwise>
</c:choose>
</td>
--------------------------
이렇게 하면 된다.
우리가 정말 싫어하는 하드코딩이 들어가는 순간..

보통 테이블 설계시 위와 같은 코드 데이터의 경우
공통코드 테이블에 함께 관리를 하고 있을것이므로,
해당 테이블을 이용해서
List를 가져오고, 그 리스트를 select box로 구성하고
list의 데이터에 맞게 select box의 데이터가 변하도록 하려면.. 
--------------------------
<td width="123" align="center" > 
<select name="useYn"  >
<c:forEach var="code" items="${codeList}" varStatus="status2">
<option value="<c:out value="${code.commCode }" />" 
<c:if test="${result.useYn == code.commCode }">selected="selected"</c:if>>
<c:out value="${code.commCodeDes }" />
</option>
</c:forEach>
</select>
</td>
--------------------------
jstl 태그의 foreach를 많이 써 본 사람이라면 바로 이해가 될 것이다.
여기서 좀 주목했으면 하는게 보라색 부분이다.

리스트를 이용해서 select box를 구성만 하면 끝이 아니고,
조회해온 리스트의 데이터에 따라서 
select box 중 하나의 데이터가 선택되어야 하는데,
이는 selected 라는 속성을 이용하면 되고, 
이는 조건문을 통해서 동적으로 구성되고 있다.

흠,,
암튼 
오랜만에 날코딩 한번 했더니 
기분이 묘하다.. 

정말 이전에 순수 JSP/Servlet 환경에서
얼마나 힘들었을까,
아니 그 이전에 model1 환경이었을때
유지보수 했던 분들이 존경스러울 정도다..

암튼,
기본부터 탄탄한 역량이 필요!!
하나 배워간다~~~


덧글

댓글 입력 영역