6. 클릭시 자식 노드 숨기기

forest71 2017. 1. 14. 13:52

2017. 1. 14. 13:52

본 예제는 모든 데이터를 화면에 출력하고

자식 노드는 부모 노드 보다 뒤로 들여쓰기 하여 구현했다.

이번 단계에서는 부모 노드를 클릭하면

자식 노드를 감추고 보여주는 기능을 구현할 예정인데

쉽게 코드를 설명하기 위해

숨기는 기능부터 먼저 구현해 본다.

기능 구현을 위해 고려해야 할 대상은 다음과 같다.

클릭 대상 선택
자식이 있는 부모와 없는 부모, 자식을 보여주고 있는지 숨기고 있는지 구분하는 방법

둘 다 같은 결과를 필요로 하는데,

하나의 노드(행)를 클릭해서 자식을 숨기게 되면

현재 어떤 노드가 선택되었는지 보여 주는 기능을 구현하기 어렵다.

(행 선택 기능으로 여기서는 구현하지 않는다.)

그리고 두 번째 기능을 구현하기 위해

대부분 노드 앞에 특정 기호를 사용하게 된다.

즉, 특정 기호로 자식이 있는지 없는지 표시하고

특정 기호를 클릭하면 자식을 보이거나 숨기게 구현다.

윈도우 탐색기를 예로 하면

하위 폴더가 있는 경우 + 기호가 나오고

부모 폴더의 + 기호를 클릭하면

하위 폴더가 나타나며 – 기호로 바뀌게 된다.

여기서는 이 기호를 Expander라고 하고

Expander를 클릭하면 자식을 숨기거나

보이도록 구현한다.

다음으로 처리해야 할 것은

Expander를 클릭하면

내 자식 노드들을 찾아서 숨기는 것이다.

나의 자식은 나를 부모로 지정한 노드들을 의미하고

나를 부모로 지정한 노드들은

클래스명에 "treegrid9-parent-"를 이용하여

나(나의 ID)를 지정한 노드들을 의미한다.

이상의 개념을

다음과 같이 코드로 구현하면 되는데

코드를 보기 전에

위 개념을 토대로 직접 작성 해보는 것이 실력향상에 도움이 될 수 있다.

<!DOCTYPE html>

<head>
<title> treegrid9 </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
			  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
			  crossorigin="anonymous"></script>
<script src="sample4_treegrid9.js"></script>
<style>
.treegrid9-indent {width:16px; display: inline-block; position: relative;}
.treegrid9-expander {width:16px; height: 16px; display: inline-block; position: relative; cursor: pointer;}
</style>
<script>
/*
클릭시 자식 노드 숨기기
*/		
		
var option = [ 
				{field:"task", 		width:200}, 
				{field:"startdate", width:100}, 
				{field:"enddate", 	width:100} 
			];
var data = [
				{id:"1", "task": "job1", "startdate": "2016-10-11", "enddate": "2016-11-11"},
				{id:"2", "task": "job2", "startdate": "2016-10-11", "enddate": "2016-10-30", parent: "1"},
				{id:"3", "task": "job3", "startdate": "2016-11-12", "enddate": "2016-12-11", parent: ""} 
			];
			
window.onload = function() {
	var tree = $("#tree");
	new TreeGrid9(tree, option, data); 
}

</script>
</head>

sample4.html

HTML 파일에서 11 라인에 CSS 클래스 하나를 추가 했다.

자식 노드를 숨기고 보여주기 위한 expander와 관련된 것으로

treegrid9-indent와 같은 기능을 하지만

expander 기호에 마우스를 올리면

클릭할 수 있는 기호로 바꾸는 스타일이 추가된 것이다.

var parentPattern = /treegrid9-parent-([0-9_-]+)/;

var idPattern = /treegrid9-([0-9_-]+)/;

function getNodeId(node) {
    if (idPattern.test(node.attr('class'))) {
        return idPattern.exec(node.attr('class'))[1];
    }
    return null;
};

sample4_treegrid9.js

먼저 30 라인을 보면 If문 조건이 바뀌었다.

이전에는 첫 번째 필드(i===0)이고

깊이가 0 이상 (depth>0)이면 들여쓰기를 하도록 했는데,

현재는 깊이 조건이 빠져서

모든 노드에서 들여쓰기 span이 생성된다.

자식이 있는 부모에 expander 기호를 붙이게 되면

다음과 같이 자식이 없는 부모와 줄 맞춤이 맞지 않게 된다.

+ Job1
Job3

따라서 모든 노드에 span을 생성하고

자식이 있는 부모 노드만 span에 expander 기호와

CSS 스타일(treegrid9-expander)를 넣어서 보기 좋게 만들었다.

다음으로 기존 코드에 추가된

13 라인부터 22 라인을 이해하면 된다.

자식이 부모를 지정하는 방식이기 때문에

자식을 생성하다가

부모 ID(row.parent)로 부모를 찾아서 $(".treegrid9-" + row.parent)

부모의 클래스 명에 treegrid9-expanded라는

이름이 있으면 부모 표시가 된 것이니 넘어가고

없으면 부모 표시가 되지 않은 것이니 !parent.hasClass("treegrid9-expanded")

부모 표시와 처리를 진행하게 된다.

클래스명 treegrid9-expanded는 식별자로 사용되는 이름이고

별도의 CSS 지정을 하지 않았다.

이렇게도 많이 사용하기 때문에 기억해두면 좋을 것이다.

부모 처리가 되지 않았으며

먼저, expander로 사용할 span 태그를 찾는다.

여기서는 부모(parent[0] 즉 TR)의

첫 번째 셀(TD) 중에서 첫 번째 자식(span)을

expander 기호를 넣을 태그로 보고 .addClass("treegrid9-expander")

– 기호를 넣어준다. expander.html("-")

expander(기호)를 클릭하면

현재 노드의 자식 노드를 찾아서 숨겨주는 처리를 해야 한다.

클릭한 개체(expander 즉 this)에

가장 가까운(closest) TR을 찾아서 $(this).closest("tr")

현재 노드를 파악하고,

현재 노드의 ID을 추출한 뒤 getNodeId(tr)

해당 ID을 부모로 지정한 "tr.treegrid9-parent-" + id

모든 자식(TR)을 찾아서 find

보이지 않게 (hide) 처리하면 된다.

JQuery의 closest, find, hide를 활용한 코드로

자세한 설명은 찾아 보길 바란다.

마지막으로 현재 노드의 ID 값을 찾는 getNodeId 함수는

getDepth 함수와 같이 정규식을 사용해서

ID 값(숫자)만 남겨서 반환하는 함수이다.

sample4.html 파일을 실행한 후

expander(-)를 클릭해서

다음과 같이 Job2가 숨겨지는지 확인해 보자

저작자표시

'JavaScript > TreeGrid' 카테고리의 다른 글

3. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기 I (0)	2017.01.14
4. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기 II (0)	2017.01.14
5. 라이브러리화 (0)	2017.01.14
7. 클릭시 자식 노드 숨김 / 보이기 (0)	2017.01.14
8. 버그 수정 (0)	2017.01.14

SW 개발이 좋은 사람

6. 클릭시 자식 노드 숨기기

'JavaScript > TreeGrid' 카테고리의 다른 글

+ Recent posts

티스토리툴바