jQuery dynatree plugin (트리구조 라이브러리)

이번에 소개하는 jQuery Plugin 은 Dynatree.js 입니다.

트리 구조로 표현할 때 직접 구현하기 보다는 데이터만 트리구조로 해놓은 뒤 Plugin 을 이용하여 데이터 트리를 표현하는게 일반적입니다.

오픈 소스가 정말 많아서 이런저런 Tree Plugin 을 사용해봤지만 가장 좋았던 것은 Dynatree.js plugin 였습니다.

대부분의 트리 구조는 비슷하다. Json 데이터 또는 html 의 <li> 태그 등을 이용하여 트리 구조를 그리는게 대부분의 방식입니다.

Dynatree 도 마찬가지로 다양한 방법을 제공합니다.

Sample 들은 아래의 사이트에서 확인 가능합니다.

http://wwwendt.de/tech/dynatree/doc/samples.html

Dynatree 가 좋았던 점은 다양한 방법으로 Tree 를 그리기가 쉽습니다.

Sample 중 몇 개의 소스를 소개하도록 하겠습니다.

1. <li> 태그를 이용하여 트리구조 그리기 

<div id="tree"> <ul id="treeData" style="display: none;"> <li id="id1" title="Look, a tool tip!">item1 with key and tooltip <li id="id2">item2 <li id="id3" class="folder">Folder with some children <ul> <li id="id3.1">Sub-item 3.1 <ul> <li id="id3.1.1">Sub-item 3.1.1 <li id="id3.1.2">Sub-item 3.1.2 </ul> <li id="id3.2">Sub-item 3.2 <ul> <li id="id3.2.1">Sub-item 3.2.1 <li id="id3.2.2">Sub-item 3.2.2 </ul> </ul> <li id="id4" class="expanded">Document with some children (expanded on init) <ul> <li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init) <ul> <li id="id4.1.1">Sub-item 4.1.1 <li id="id4.1.2">Sub-item 4.1.2 </ul> <li id="id4.2">Sub-item 4.2 <ul> <li id="id4.2.1">Sub-item 4.2.1 <li id="id4.2.2">Sub-item 4.2.2 </ul> </ul> </ul> </div>

이런 방법으로 <li> 태그를 이용하여 화면에서 직접 컨트롤하여 Tree 구조를 그려도 됩니다.

하지만 이 방법으로 하게되면 화면이 많이 복잡해 질 수가 있어 추천하지 않습니다.

트리구조가 바뀌지 않는 데이터라면 간단하게 하드코딩으로 이렇게 해서 써도 괜찮을 것입니다.

2. javascript 에서 ajax 로 Json 데이터를 받아 그리기

$(function(){ $(function(){ $("#tree").dynatree({ // In real life we would call a URL on the server like this: // initAjax: { // url: "/getTopLevelNodesAsJson", // data: { mode: "funnyMode" } // }, // .. but here we use a local file instead: initAjax: { url: "sample-data1.json" }, onActivate: function(node) { $("#echoActive").text(node.data.title); }, onDeactivate: function(node) { $("#echoActive").text("-"); } }); });

아래와 같이 Server Side 에서 Json 데이터를 구현만 해주면됩니다.

[ {"title": "Item 1"}, {"title": "Folder 2", "isFolder": true, "key": "folder2", "children": [ {"title": "Sub-item 2.1"}, {"title": "Sub-item 2.2"} ] }, {"title": "Folder 3", "isFolder": true, "key": "folder3", "children": [ {"title": "Sub-item 3.1"}, {"title": "Sub-item 3.2"} ] }, {"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"}, {"title": "Item 5"} ]

처음 Tree 가 호출되었을 때 Ajax 로 호출하여 그리는 방식입니다.

Server Side 에서 트리구조 Json 데이터 리스트를 가져올 수 있도록 구현을 하면 됩니다.

보통 이런 경우 Server Side 에서 쿼리로 재귀쿼리로 Tree 구조를 가져온뒤 Dynatree Json 타입에 맞게 만들어 넘기면 됩니다.

3. lazy loading 방식으로 그리기

$(function(){ // --- Initialize sample trees $("#tree").dynatree({ title: "Lazy loading sample", fx: { height: "toggle", duration: 200 }, autoFocus: false, // Set focus to first child, when expanding or lazy-loading. // In real life we would call a URL on the server like this: // initAjax: { // url: "/getTopLevelNodesAsJson", // data: { mode: "funnyMode" } // }, // .. but here we use a local file instead: initAjax: { url: "sample-data3.json" }, onActivate: function(node) { $("#echoActive").text("" + node + " (" + node.getKeyPath()+ ")"); }, onLazyRead: function(node){ // In real life we would call something like this: // node.appendAjax({ // url: "/getChildrenAsJson", // data: {key: node.data.key, // mode: "funnyMode" // } // }); // .. but here we use a local file instead: node.appendAjax({ url: "sample-data2.json", // We don't want the next line in production code: debugLazyDelay: 750 }); } }); $("#btnReloadActive").click(function(){ var node = $("#tree").dynatree("getActiveNode"); if( node && node.isLazy() ){ node.reloadChildren(function(node, isOk){ }); }else{ alert("Please activate a lazy node first."); } }); $("#btnLoadKeyPath").click(function(){ var tree = $("#tree").dynatree("getTree"); // Make sure that node #_27 is loaded, by traversing the parents. // The callback is executed for every node as we go: tree.loadKeyPath("/folder4/_23/_26/_27", function(node, status){ if(status == "loaded") { // 'node' is a parent that was just traversed. // If we call expand() here, then all nodes will be expanded // as we go node.expand(); }else if(status == "ok") { // 'node' is the end node of our path. // If we call activate() or makeVisible() here, then the // whole branch will be exoanded now node.activate(); } }); }); <!-- (Irrelevant source removed.) --> });

lazy loading 방식은 간단히 모든 Tree 구조데이터를 한번에 가져오는게 아니라 Tree 의 Children 을 실시간으로 가져오는 방식입니다.

2번째 방식인 ajax로 json 데이터를 가져오는 것은 같지만 처음에 전체 데이터가 아닌 큰 구조의 데이터라던지 부모 데이터만 가져온 뒤에 살을 붙입니다.

Ajax 로 실시간으로 해당 Node 의 Children 만가져오도록 구현을 하면 되기 때문에 

재귀쿼리로 Tree 전체를 만들어야되는 복잡도가 줄어들기때문에 괜찮은 방법입니다.

이번 프로젝트에서도 2번째 방법으로 개발을 하다가 3번째 방법인 lazy Loading 방식으로 변경하였더니 소스가 간결해 져서 좋았습니다.

실제로 부모 Node를 가져온 뒤 클릭할때마다 Node 의 Children 만 가져와서 붙이기때문에 쿼리도 더 간단해졌습니다.

3번째 방법이 가장 좋은 것은 아니다. 상황에 따라 필요한 방식으로 개발을 하는게 제일 좋습니다.