[JSP] 동적 SELECT 박스 구현.
2013. 10. 30. 15:21ㆍIT/Develope
프로젝트 수행하면서 제대로 구현이 안 되서 미치는줄...
동적 SELECT 박스의 구현의 방법을 참고하고 생각해보니
크게 1) Ajax를 이용하여 비동기 데이터 구현.
2) 선택할 때마다 DB와의 통신을 통해 페이지 refresh.
3) 아예 처음부터 모든 SELECT 박스 값들을 다 긁어와 옵션에 맞게 뿌려주기.
1번 Ajax는 아직 익숙치 않아서 일단 패스.
2번은 SELECT 박스를 제외한 값이 입력될 필드가 가변적이기 때문에 그에 대한 예외처리의 복잡성으로 패스.
남은 것은 3번인데.
예전이야 JSP안에 DB쿼리까지 다 있었기 때문에 단순하게 구현하는건 쉬웠던 것 같은데, 적어도 MVC패턴으로라도 구현을 해야하기에 컨트롤러에서 메소드를 호출하여 해당 파라미터를 JSP로 넘기는 식으로 구현함.
혹시, 하실 말씀이 있으신 분들은 온화한 말투로 비평을 해주시면 감사하겠습니다ㅎㅎ
* 소스 부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118 |
<%--
** 작성자 : @peacepoem
** 작성일 : 2013.10.30
** 내 용 : 동적 SELECT 박스 구현.
** 추 가 : ROW 추가시에 SELECT 박스 ID에 구분자 추가.
**
--%>
function changeClassCd(rowIndex){
var rowInd; // rowIndex를 담기 위한 변수
if(rowIndex=="0") { // rowIndex가 0이면 이 부분은 기본 SELECT 박스로 인식.
rowInd = "";
} else { // 그 외에면 rowIndex 값을 rowInd에 저장하여 사용한다.
rowInd = rowIndex;
}
var classCd = document.getElementById("assetClassCd"+rowInd).value;
document.getElementById("assetTypeCd"+rowInd).innerHTML = ""; // SELECT 박스 초기화
document.getElementById("assetTypeCd"+rowInd).options.add(new Option("--선택--", "0")); // SELECT 박스 기본 값 세팅
if(classCd==183) { // 부동산에 해당하는 마스터SEQ를 박아놓음 183
<%
for(int i = 0; i < assetMaster1.size() ; i ++) { // ArrayList사이즈 만큼 for문을 돌려 option 값들을 세팅
AssetBean ab = (AssetBean)assetMaster1.get(i);
%>
// 현재 페이지 안의 특정 Id값을 가져와 추가를 해준다. new Option(값, id)
document.getElementById("assetTypeCd"+rowInd).options.add(new Option("<%=ab.getAssetTypeName()%>","<%=ab.getAssetTypeCd()%>"));
<% } %>
}
else if(classCd==184) { // 동산에 해당하는 마스터 SEQ를 박아놓음 184
<%
for(int i = 0; i < assetMaster2.size() ; i ++) {
AssetBean ab = (AssetBean)assetMaster2.get(i); // ArrayList사이즈 만큼 for문을 돌려 option 값들을 세팅
%>
document.getElementById("assetTypeCd"+rowInd).options.add(new Option("<%=ab.getAssetTypeName()%>","<%=ab.getAssetTypeCd()%>"));
<% } %>
}
else if(classCd==185) { // 채권에 해당하는 마스터SEQ를 박아놓음 185
<%
for(int i = 0; i < assetMaster3.size() ; i ++) {
AssetBean ab = (AssetBean)assetMaster3.get(i); // ArrayList사이즈 만큼 for문을 돌려 option 값들을 세팅
%>
document.getElementById("assetTypeCd"+rowInd).options.add(new Option("<%=ab.getAssetTypeName()%>","<%=ab.getAssetTypeCd()%>"));
<% } %>
}
}
<%--
** 작성자 : @peacepoem
** 작성일 : 2013.10.30
** 내 용 : innerHTML로 Row 추가
** 추 가 : ROW 추가시에 SELECT 박스 ID에 구분자 추가.
--%>
function fn_addAssetData(){
var newRow = assetTable.insertRow();
newRow.onmouseover=function(){assetTable.clickedRowIndex=this.rowIndex};
// SELECT 박스 추가를 위해 별도의 String으로 생성
var str1 = "<select name='assetRelationCd' class='select' style='width:80px;'><option value='0'>--선택--</option> <%= mcu.getMasterSelect2(38, 0)%> </select>";
// innerHTML로 ROW 추가시에 SELECT BOX의 구분이 모호해지므로 ID에 rowIndex를 추가하여 구별을 함.
// changeClassCd 함수 호출시에도 파라미터로 인덱스 값을 넘김.
var str2 = "<select name='assetTypeCd' id='assetClassCd"+newRow.rowIndex+"' class='select' style='width:90px;' onChange='javascript:changeClassCd("+newRow.rowIndex+");''><option value='0'>--선택--</option><%= mcu.getMasterSelect2(39, 0) %></select>";
var newCell1 = newRow.insertCell();
var newCell2 = newRow.insertCell();
var newCell3 = newRow.insertCell();
var newCell4 = newRow.insertCell();
var newCell5 = newRow.insertCell();
var newCell6 = newRow.insertCell();
var newCell7 = newRow.insertCell();
// style setting
newRow.setAttribute("align", "center");
//newRow.className = "td_01"; // class지정
newCell1.width = "80";
newCell2.width = "90";
newCell3.width = "90";
newCell4.width = "270";
newCell5.width = "120";
newCell6.width = "100";
newCell7.width = "20";
newCell1.className = "td_bg";
newCell2.className = "td_bg";
newCell3.className = "td_bg";
newCell4.className = "td_bg";
newCell5.className = "td_bg";
newCell6.className = "td_bg";
newCell7.className = "td_bg";
//newCell4.setAttribute("align", "left");
newCell1.innerHTML = str1;
newCell2.innerHTML = str2;
newCell3.innerHTML = "<select name='assetTypeCd' id='assetTypeCd"+newRow.rowIndex +"' class='select' style='width:90px;'><option value='0'>--선택--</option></select> ";
newCell4.innerHTML = "<input type='text' name='assetDetail' value='' style='width:99%' class='input'>";
newCell5.innerHTML = "<input type='text' name='realPrice' value='' style='width:99%' class='input'>";
newCell6.innerHTML = "<input type='text' name='remark' value='' style='width:99%' class='input'>";
newCell7.innerHTML = "<img src='images/icon/icon_del.gif' onClick=javascript:fn_delClassCd(); border='0' align='absmiddle' style='cursor:pointer'>";
}
// Row 제거.
function fn_delClassCd() {
assetTable.deleteRow(assetTable.clickedRowIndex);
}
// HTML 부분
<td class="td_bg">
<select id="assetClassCd" class="select" style="width:90px;" onChange="javascript:changeClassCd(0);">
<option value="0">--선택--</option><%= mcu.getMasterSelect(39, 0) %>
</select>
</td>
<td class="td_bg">
<select name="assetTypeCd" id="assetTypeCd" class="select" style="width:90px;">
<option value="0">--선택--</option>
</select>
</td> |
'IT > Develope' 카테고리의 다른 글
| 리큐브 REQUBE 설치 및 기본 환경설정 (3) | 2013.05.10 |
|---|