자바스크립트 Tree 구현(dTree)
메뉴의 구조라든지, 부서를 표현 할 때 트리로 보여주는 경우가 대부분인데요. 계층형 구조라고도 하지요. 이렇게 트리로 보여주는 요구는 엄청나게 많은데요.
하여 오늘은 Tree 자바스크립트 구현(dTree)에 대해서 알아보겠습니다.
dTree는 무료이며 순수 자바스크립트 만으로 구현이 가능 합니다.
▶ 메뉴 구현
아래의 소스를 이용하시면 쉽게 메뉴 구현을 하실수 있습니다. (부서도 같이 쉽게 구현이 가능 하십니다.)<div class="dtree">
<script type="text/javascript">
<!--
//id, pid, name, url, title, target, icon, iconOPne, open,
d = new dTree('d');
d.config.target="right";
d.config.folderLinks = false;
// ----------------- INTRODUCTION ------------------//
d.add(0,-1,'<B>FusionCharts Free</B>','','FusionCharts Free Documentation');
d.add(1,0,'<a href="javascript:treeClick(1);">Introduction</a>','','Introduction & Installation','','','',true);
d.add(101,1,'<a href="javascript:treeClick(2);">Overview</a>','Overview.html','Introduction to FusionCharts Free');
d.add(102,1,'Terms of Use (License)','terms.html','Terms of Use (License)');
d.add(103,1,'System Requirements','SysReq.html');
d.add(104,1,'Installation','Installation.html');
d.add(105,1,'Download Contents','DownloadC.html','Folder Structure of what\'s present in your download package');
d.add(106,1,'List of Charts','ChartList.html');
d.add(107,1,'Free vs. Version 3', 'v3vsFree.html','What Additional Features do I get in FusionCharts v3 ?');
// --------------- SAMPLE CHARTS -------------------- //
d.add(2,0,'Sample Charts','');
d.add(201,2,'Single Series Charts','');
d.add(2101,201,'Column 2D Chart','../Gallery/Column2D.html');
d.add(2102,201,'Column 3D Chart','../Gallery/Column3D.html');
d.add(2103,201,'Line 2D Chart','../Gallery/Line2D.html');
d.add(2104,201,'Pie 3D Chart','../Gallery/Pie3D.html');
d.add(2105,201,'Pie 2D Chart','../Gallery/Pie2D.html');
d.add(2106,201,'Bar 2D Chart','../Gallery/Bar2D.html');
d.add(2107,201,'Area 2D Chart','../Gallery/Area2D.html');
d.add(2108,201,'Doughnut 2D Chart','../Gallery/Doughnut2D.html');
d.add(108,1,'Upgrading to Version 3', 'Upgrading.html','Upgrading to Version 3');
document.write(d);
function treeClick(id)
{
alert(id);
}
//-->
</script>
<p><a href="javascript: d.openAll();">Expand all</a> | <a href="javascript: d.closeAll();">Collapse all</a></p>
</div>
위 소스를 구현한 모습입니다.
dTree를 사용하기 위해서는 아래에서 해당 js 및 필요한 파일을 받으시면 됩니다.
[참고 dTree.zip 다운로드]
▶ Ajax 및 Refresh
dTree를 사용함에있어 Ajax를 사용하여 DB의 정보를 Json형식으로 가져와 dTree를 그려주거나 그려준 dTree의 내용이 변경되었을 경우 Refresh를 해줄 때 에러를 발생하는 경우가 있었습니다.저와 같은 이런 분들은 아래와 같은 방법으로 사용을 하시면 해결 됩니다.
<script type="text/javascript" language="javascript">
// 트리구현
function getTree()
{
var jsonObj = {};
jsonObj.userId = SESSION_INFO.userId; // 로그인 사용자 ID
$.ajax(
{
type : "POST",
url : "${pageContext.request.contextPath}/select/getTree/action.do",
dataType : "json",
data : {"param" : JSON.stringify(jsonObj)},
async : false,
beforeSend : function(xhr)
{
// 전송 전 Code
},
success : function(data)
{
tree = new dTree('tree');
tree.config.target="right";
tree.config.folderLinks = false;
tree.add(0,-1,'<B>캠페인 그룹</B>','','캠페인 그룹');
for (var i=0; i<data.length; i++)
{
tree.add(data[i].groupId, data[i].parentGroupId, data[i].groupName, data[i].publicYN);
}
$("#divTree").html(tree.toString());
},
error : function(xhr)
{
// Error 발생 Code
alert(xhr.responseText);
}
});
}
$(document).ready(function()
{
getTree();
});
</script>
<body>
<div id="divTree"></div>
</body>
이상으로 Tree 자바스크립트 구현(dTree)에 대해서 알아보았습니다.
댓글
댓글 쓰기