1. 자바스크립트로 만드는 TreeGrid

자바 스크립트(JavaScript)를 이용하여

간단한 TreeGrid를 제작해 본다.

TreeGrid는 다음 그림(EasyUI TreeGrid)처럼

데이터를 트리와 그리드(List)의 결합 형태로 출력하는

라이브러리를 의미한다.

여기서는 실제로 사용할 수 있는 TreeGrid를 만드는 것이 아니라

간단한 TreeGrid를 단계별로 구현해 보면서

TreeGrid원리와

자바스크립트, Json 사용법 등을 설명하려고 한다.

실제 사용은 TreeGrid jQuery, EasyTree 등

무료(MIT) 라이브러리 등이 많이 있으니

이것을 그대로 사용하는 것이 좋고,

여기서는 간단하게 TreeGrid를 만들어 보면서

실력을 향상 시키는 것이 목적이다.

예제도 이 라이브러리에서 사용된 일부 코드를 가져와서 구성했으며

본 내용을 다루는 기본을 이해하고

차후 이 라이브러리를 분석해 보면 실력 향상에 도움이 될 것이다.

기본적으로 자바 스크립트, JQuery, JSON의 기본적인 사용법은 알고 있어야 하고,

모르는 경우 찾아보길 바란다.

구성 단계는 다음과 같이 6단계로 세분화하여 정리하였다.

1. 트리용 데이터(JSON)을 화면에 출력
2. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기
3. 라이브러리화
4. 클릭시 자식 노드 숨기기
5. 클릭시 자식 노드 숨김 / 보이기
6. 버그 수정
   

이 단계를 거쳐도 실제적인 TreeGrid를 만들지는 못한다.

TreeGrid를 제작하는 원리를 익히며

자바스크립트(JavaScript)와 JQuery, Json 사용법 등을 익히는 것이 목적이다.