Demo
SeedTree는 빠르고 간편하게 트리구조를 표현할 수 있습니다. 웹 사이트 제작시 SeedTree를 사용해 보세요.
Support Browser
SeedTree는 다양한 브라우저를 지원 합니다. 아래의 지원 브라우저를 확인 하세요.
Download
SeedTree 라이브러리를 다운로드 하세요.
Manual
SeedTree 메뉴얼을 다운로드 하세요.
라이브러리 추가
Header 영역에 내려받은 SeedTree를 포함 시키세요.
<!-- css -->
<link rel="stylesheet" type="text/css" href="/resources/library/seedtree/seedtree.min.css" />
<!-- script -->
<script type="text/javascript" src="/resources/library/seedtree/seedtree.min.js"></script>
트리뷰 영역 추가
Body 영역에 Div 태그를 추가 하세요.
<div id="tree"></div>
트리뷰 생성
Javascript 영역에 SeedTree 객체를 생성하고, 트리뷰를 로드하는 소스 코드를 작성 하세요.
// 객체 생성
var tree = new SeedTree();
// 트리 설정값
var treeConfig = {
stArea: "tree1",
stType: "st_type1",
stName: "조직도 (573개)",
stWidth: "400",
stHeight: "450",
stBackColor: "#fafafa",
stBorderColor: "#d5d5d5"
}
// 트리 데이터 조회 Ajax
function listTreeData(pViewNode) {
$.ajax({
type: "POST",
url: "/AjaxData/ListTreeData",
dataType: "json",
async: false,
data: { "pViewNode": pViewNode },
success: function (datas) {
// 트리뷰 생성
tree.makeTree(tree, treeConfig, datas, pViewNode, tree_click, [1, 2]);
},
error: function (e) {
alert("오류발생");
}
});
}
// 페이지 로드
$(document).ready(function (e) {
// 트리 데이터 조회
listTreeData("CO01");
});
// 트리 버튼 클릭 이벤트
function tree_click(pNodeCd, pNodeNm, pParentNodeCd, pNodeChild, pNodeData, pParam) {
// 선택 노드의 코드, 명칭 확인
alert(pNodeCd);
alert(pNodeNm);
alert(pParentNodeCd);
alert(pNodeChild);
alert(pNodeData);
alert(pParam);
alert(pParam[0]);
alert(pParam[1]);
}
