https://mportal.cau.ac.kr/common/js/SpTreeView.js

1
2	
3var default_dept_cd = '00000';
4
5var treeView = function(obj){
6	
7	var root = this;
8	this.rootElement = $("#"+obj);
9	this.callback = null;
10	
11	this.init = function(){
12		root.rootElement.children().remove();
13		
14		// 루트노드생성
15		var row = {
16				cnt : -1,
17				deptCd : '00000',
18				deptKorNm : '중앙대학교',
19				deptOrdCd : '001',
20				upDeptCd : '00000'
21		};
22		
23		var node = root.makeNodeElement(row);
24		root.rootElement.append(node);
25		this.treeEventInit();
26		this.nodeClick($("i.tree-node")); // 처음에 오픈상태로 시작
27	};
28	
29	this.setClickEvent = function(callback){
30		this.callback = callback;
31	};
32	
33	this.getNodeListData = function(dept_cd, target){
34		var param = {
35				dept_cd : dept_cd
36		};
37		
38		this.post("/common/selectDeptListByTree.ajax", param, function(response){
39			//console.log(response);
40			root.makeNode(response, target);
41		});
42	};
43	
44	this.makeNode = function(data, target){
45		
46		$.each(data, function( index, row ) {
47			var node = root.makeNodeElement(row);
48			
49			target.append(node);
50			  
51		});
52		
53		this.treeEventInit();
54		
55	};
56	
57	this.treeEventInit = function(){
58		
59		$(".tree-model .tree-node").unbind('click');
60		$(".tree-model .tree-node").click(function(){
61			root.nodeClick(this);
62		});
63	};
64	
65	this.nodeClick = function(obj){
66		var dept_cd = $(obj).attr('data-dept-cd');
67		
68		var target = $(obj).parent().find(".childDiv");
69		
70		if(target.find("ul").children().size() == 0){ // 처음에 불러올때만 데이터를 가져온다
71			root.getNodeListData(dept_cd, target);
72		}
73		
74		if($(obj).parent().find('i.tree-icon:eq(0)').hasClass("collapsed")){ // 열기
75			target.show();
76		}else{ // 닫기
77			target.hide();
78		}
79		
80		$(obj).parent().find('i.tree-icon:eq(0)').toggleClass("collapsed");
81		$(obj).parent().find('i.tree-icon:eq(0)').toggleClass("expanded");
82		
83		if($(obj).parent().find('i.tree-icon:eq(0)').hasClass("normal")){
84			
85			$(".tree-model .select-node").removeClass('select-node');
86			$(obj).parent().addClass("select-node");
87			
88			if(root.callback != null){
89				root.callback($(obj).attr('data-dept-nm'), $(obj).attr('data-dept-cd'));
90			}
91		}
92	};
93	
94	this.post = function(url, param, callback){
95		$.ajax({
96            url:url,
97            type:'post',
98            data : JSON.stringify(param),
99            dataType: 'json',
100            contentType: "application/json",
101            success: function(data){
102            	callback(data);
103            },
104            error : function(xhr, status, error) {
105            	alert(error);
106            	console.log("xhr : "+xhr);
107            	console.log("status : "+status);
108            	console.log("error : "+error);
109            }
110        });
111	};
112	
113	this.makeNodeElement = function(row){
114		
115		var markup = $("<div />");
116		var divRoot = $("<div />").addClass('childDiv');
117		var ul = $("<ul />").addClass("ng-scope");
118		var li= $("<li />").addClass("ng-scope");
119		
120		// collapsed expanded normal
121		var icon= $("<i />").addClass("collapsed tree-node tree-icon").attr("data-dept-cd", row.deptCd).attr("data-dept-nm", row.deptKorNm);
122	
123		var span= $("<span />").addClass("tree-node").attr("data-dept-cd", row.deptCd).attr("data-dept-nm", row.deptKorNm);
124		
125		var childDiv= $("<div />").addClass('childDiv');
126		
127		var childUl= $("<ul />").addClass("ng-scope");
128		
129		if(row.cnt != -1 && row.cnt == 0){
130			icon.removeClass("collapsed");
131			icon.addClass("normal");
132			span.text(row.deptKorNm);
133		}else{
134			if(row.cnt == -1){
135				span.text(row.deptKorNm);
136			}else{
137				span.text(row.deptKorNm+"("+row.cnt+")");
138			}
139		}
140		
141		childDiv.append(childUl);
142		li.append(icon);
143		li.append(span);
144		li.append(childDiv);
145		ul.append(li);
146		divRoot.append(ul);
147		markup.append(divRoot);
148		return markup.html();
149	};
150	
151	
152/*	<div>
153		<ul class="ng-scope">
154			<li class="ng-scope">
155				<i class="collapsed hide" ></i>
156				<i class="expanded hide" ></i>
157				<i class="normal"></i> <span>Activities</span>
158				<div>
159					<ul class="ng-scope">
160						
161					</ul>
162				</div>
163			</li>
164		</ul>
165	</div>*/
166
167	
168};
169
170	
171