Mysql hierarchy sql 계층구조 쿼리 2 : 그리기(Multi selectbox)
https://developyo.tistory.com/54
위의 쿼리에서 꺼내온 정보를 화면에 뿌려보자.
<1: 컨트롤러 코딩>
1. 가이드 목록을 출력하기 위한 controller
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@RequestMapping("/loadGuideList.do")
public ModelAndView loadGuideList(HttpServletRequest request, @RequestBody GuideVO param) throws Exception
{
ModelAndView mav = new ModelAndView("jsonView");
List<GuideVO> guideList = service.selectGuideList(param);
mav.addObject("guideList", guideList); //가이드 목록
mav.addObject("paramsData", param);
return mav;
}
|
cs |
2. 멀티 셀렉트박스 목록을 ajax로 불러오기 위한 controller
|
1
2
3
4
5
6
7
8
9
|
@RequestMapping("/getNodeList.do")
public ModelAndView getNodeGroup(HttpServletRequest request, @RequestBody NodeVO param) throws Exception
{
ModelAndView mav = new ModelAndView("jsonView");
List<NodeVO> nodes = service.selectNodeList(param); //가이드 카테고리
mav.addObject("nodes", nodes);
return mav;
}
|
cs |
* Service, DAO, VO 는 별다른 내용이 없으므로 생략..
<2: script 코딩>
|
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
|
var loadData = {
//가이드 목록 호출
loadGuideList : function () {
var totalSearchFlag = "N"; //가장 낮은 depth 의 선택 값이 전체인 경우 Y
//현재 선택된 node_id 값 set (조회용)
var nodeCnt = $(".nodeGroup").length;
//조회
var paramVal = "";
for(var i=nodeCnt-1; i>=0; i--){
//제일 우측(낮은 depth) 셀렉트 박스부터 제일 좌측(높은 depth) 로 반복문
var val = $(".nodeGroup:eq("+i+")").val();
var node_id = val.split("^")[0];
if(node_id && node_id != ""){
//node_id 가 존재하는 경우(전체 선택이 아닌 경우)
paramVal = node_id;
break;
} else {
//node_id 가 존재하지 않는 경우(전체 선택인 경우)
totalSearchFlag = "Y";
continue;
}
}
$("form[name=frmGuide] input[name=totalSearchFlag]").val(totalSearchFlag);
$("form[name=frmGuide] input[name=node_id]").val(paramVal);
var params = {
node_id : $("form[name=frmGuide] input[name=node_id]").val(),
totalSearchFlag : $("form[name=frmGuide] input[name=totalSearchFlag]").val()
};
$.ajax({
type : "post",
url : "/stbcs/ipchk/loadGuideList.do",
contentType: "application/json",
dataType:"json",
data : JSON.stringify(params),
success : function (data) {
drawData.drawGuideList(data);
}
});
} ,
//가이드 분류
loadNodeList : function(selectBox){
var obj = $(selectBox);
var tmp = obj.val().split("^");
var nodeId = tmp[0];
var leaf_yn = tmp[1];
var currentIdx = obj.parent(".nodeGrp").index(); //현재 node 의 idx
var nodeCnt = $(".nodeGrp").length; //node 갯수
if(nodeCnt > currentIdx){
for(var i=nodeCnt; i>=currentIdx; i--){
console.log("remove idx : " + i);
$(".nodeGrp:eq("+i+")").remove();
}
}
if(leaf_yn == "Y"){
//마지막 노드가 아닌 경우 (자식 노드가 있는 경우)
var params = {
node_id : nodeId
};
$.ajax({
type : "post",
url : "/getNodeList.do",
contentType: "application/json",
dataType:"json",
data : JSON.stringify(params),
success : function (data) {
drawData.drawNodeList(data);
}
});
}
}
}
var drawData = {
drawNodeList : function (data, currentIdx){
var nodeGroupTxt = "";
try{
var node = data.node;
if(node != null && node.length > 0){
if($(".nodeGrp").length == 0){
nodeGroupTxt += "<span>분류 </span>";
}
nodeGroupTxt += "<div class='selectbox small nodeGrp' style='margin-right:3px;' >";
nodeGroupTxt += "<select class='nodeGroup' name='node_id' onchange='javascript:loadData.loadNodeList(this);'>";
nodeGroupTxt += "<option value='^N'>전체</option>";
$.each(node, function(index, item){
nodeGroupTxt += "<option value=" + item.node_id+"^"+item.leaf_yn + ">" + item.node_nm + "</option>";
});
nodeGroupTxt += "</select>";
nodeGroupTxt += "</div>";
}
} catch (error) {
} finally {
$("#guideSearchDiv").append(nodeGroupTxt);
}
}
}
|
cs |
※ Multi selectbox
94line : selectbox에 onchange 이벤트를 걸어 selectbox 값이 변화할 때, 자신의 loadNodeList(this) 함수를 호출한다.
57~62line : 총 selectbox 갯수가 현재 선택된 selectbox의 index보다 큰 경우 현재 선택된 selectbox 보다 낮은 depth(우측에있는)의 selectbox를 지운다.
ex: 1, 2, 3 depth 의 selectbox 를 특정 값으로 선택해 놓고, 1번째 selectbox 의 값을 다른값으로 바꿔버린 경우 2, 3번째 selectbox tag는 .remove()로 제거한다 (remove는 싱크(동기)방식이므로 ajax 호출 순서가 보장된다)
64~80line :
selectbox에서 선택된 값이 자식노드가 있는 경우(leaf_yn == 'Y') 특정 노드를 기준으로 한 자식 노드 목록을 가져오기 위해 getNodeList.do ajax 호출
84~108line : ajax 호출을 통해 가져온 노드 목록을 selectbox로 표현
98line : 조작시 필요한 값인 노드아이디와 자식노드유무 데이터를 ^ 문자를 구분으로하여 value 값으로 넣어준다(option value = node_id^leaf_yn)
106line : 멀티셀렉트박스가 위치할 곳에 만들어준 selectbox를 .append 로 붙여넣는다
※ 가이드 목록(Multi selectbox 를 조건으로 걸어 조회한 결과 리스트)
4~46 line : 가이드 목록 ajax 호출
13~26 line :
가장 낮은 depth(제일 오른쪽)의 selectbox 부터 가장 높은 depth (제일 왼쪽)의 selectbox 까지 for 문을 돈다.
node_id^leaf_yn (노드아이디^자식노드존재유무) 값이 담겨있는 option value 를 꺼낸다.
node_id 가 존재하는 경우 전체 조회가 아니므로 해당 값을 server 쪽에 ajax 로 전달하면 된다. (for문을 끝낸다)
node_id 가 존재하지 않는 경우 전체 조회이므로 서버에 전달할 전체 조회 flag 값(totalSearchFlag)를 Y 로 바꿔준 후, for문을 계속 돌린다(continue;)
* 전체 조회 flag 값(totalSearchFlag)은 subquery(3-2 쿼리작성부분의 3번 쿼리) 를 사용할 경우 필요 없다. foreach를 사용할 경우 분기처리를 위해 필요.
* 조회한 가이드 목록을 화면에 그리는 코딩은 별다를게 없으므로 생략..
'front > javascript' 카테고리의 다른 글
| Airbnb javascript 개발 가이드 (0) | 2019.09.13 |
|---|---|
| 공통 팝업 확장 및 구현하기 : Customized PopUp (alert, confirm, loading) (0) | 2019.09.11 |
| localStorage vs sessionStorage (0) | 2019.09.10 |
| submit, replace, href 차이 (0) | 2019.08.12 |
| jqPlot (jQuery API 사용하여 그래프그리기) (0) | 2019.08.02 |