-
트리 형태의 데이터를 구성하기 위해서는 최소 2개의 값이 필요하다.
하나는 데이터 고유값인 인덱스이고, 다른 또 하나는 그 데이터의 부모를 가르키는 값이다.
각각이 데이터를 표시하기 위해 name을 같이 구성하는 것도 좋다.
어떤 언어를 사용하든 비슷하겠지만 여기에서는 자바스크립트를 이용하기로 한다.
다음과 같은 데이터가 있다고 하자.
<script type="text/javascript">
var menus = [
[1, 0, ’컴퓨터’],
[2, 1, ’모니터’],
[3, 1, ’본체’],
[4, 1, ’마우스’],
[5, 1, ’키보드’],
[6, 1, ’주변기기’],
[7, 6, ’프린터’],
[8, 7, ’스캐너’],
[9, 7, ’모뎀’],
[10, 7, ’복사기’],
[11, 1, ’부품’],
[12, 11, ’CPU’],
[13, 11, ’메모리’],
[14, 11, ’하드디스크’],
[15, 1, ’게임’],
[16, 15, ’세틀러’],
[17, 16, ’섭시트’],
[18, 16, ’세틀러2’],
[19, 16, ’세틀러3’],
[20, 15, ’블리자드’],
[21, 20, ’스타크래프트’],
[22, 20, ’디아블로’],
[23, 15, ’창세기전’]
];</script>
데이터의 첫번재 배열은 인덱스, 두번째는 부모값 그리고 세번째는 그에 대한 이름이다.
이를 가지고 트리를 구성해보자.
먼저 노드를 구성하기 위한 함수를 구성한다.
// 노드 만들기
function makeNode(item){
var el = document.createElement(’div’);
el.setAttribute(’index’, item[0]);
el.setAttribute(’parent’, item[1]);
el.className = ’box’;
el.appendChild(document.createTextNode(item[2]));
return el;
}노드는 ’div’ 태그로 구성이 되며 각각의 노드는 ’box’ 라는 스타일을 갖는다.
노드를 표시하기 위해 ’name’ 값을 별도의 자식노드로 추가하였다.
이제 실제로 트리를 구성해보자.
트리구조는 현재 노드에 자식노드들이 붙어 있는 형태로 반복이기 때문에 재귀함수를 이용한다.
함수는 처음 주어지는 노드의 인덱스 값을 구해 자료형태중 부모값이 일치하는 데이터가 있으면
노드형태로 만들어 그 노드들 현재노드의 자식노드로 취해준다.
그리고 이와 같은 형태를 반복해준다.
// 메뉴 구성
function makeMenu(node, menus){
for(var i=1; i<menus.length; i++){
if(node.getAttribute(’index’) == menus[i][1]){
node.appendChild(makeNode(menus[i]));
}
}
// 1부터 시작하는 이유는 node 의 자식노드들 중 첫번째는 TextNode 가 이미 있기 때문이다.
for(var i=1; i<node.childNodes.length; i++){
makeMenu(node.childNodes[i], menus);
}
return node;
}이제 노드를 초기화해서 구성해보자.
// 메뉴 초기화
function initMenu(){
var el = makeMenu(makeNode(menus[0]), menus)
document.getElementById(’root’).appendChild(el);
}
window.onload = function(){
initMenu();
}이제 스타일을 주자.
<style type="text/css">
.box {
padding-left:20px;
}
.main {
border:1px solid black;
}
</style>바디영역에는 트리를 구성할 div 를 구성한다.
<body>
<div class="main" id="root"></div>
</body>트리는 다음과 같은 모습으로 우리 앞에 나타난다.
반응형'개발' 카테고리의 다른 글
Ant 사용기 (0) 2009.10.01 쎄지오에서 MySQL 세팅하는 방법 (0) 2009.08.30 php - join() 함수 (0) 2009.08.20 JPanel 에 그라디언트 주기 (0) 2009.08.19 동적인 자바스크립트를 만들자 (0) 2009.08.06