jsTree는 자바스크립트에서 트리 구조로 데이터를 표현할 때 유용한 jsTree 라이브러리이다.
커스텀할 부분이 많아보이지만 차근차근하기로 하고 오늘은 간단한 사용법에 대해서 알아보자.
CDN 추가하기
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
jsTree를 간편하게 cdn으로 구현해보자. html 내 내부에 위 cdn을 삽입해준다.
jstTree 컨테이너 만들기
<div style="width: 500px; height: 500px; padding: 20px">
<div class="jstree-container" style="height: 100%">
<div id="jstree"></div>
</div>
</div>컨테이너는 기본적으로 최대 width를 가지고 있기 때문에 테스트용 div로 한겹 더 감싸주었다.
컨테이너는 완성되어도 기본적으로 아무 데이터가 없기 때문에 확인할 수 없다.
기본 데이터 추가하기
document.addEventListener("DOMContentLoaded", function () {
$('#jstree').jstree({
plugins: ["core"],
core: {
data: [
{ id: "menu1", parent: "#", text: "메뉴1" },
{ id: "menu1-1", parent: "menu1", text: "메뉴1-1" },
{ id: "menu1-2", parent: "menu1", text: "메뉴1-2" },
{ id: "menu1-2-1", parent: "menu1-2", text: "메뉴1-2-1" },
{ id: "menu2", parent: "#", text: "메뉴2" },
{ id: "menu2-1", parent: "menu2", text: "메뉴2-1" }
]
}
});
});API 통신은 따로 하지 않고 하드코딩으로 짠 더미데이터다.
나중에 서버 데이터를 추가할 때는 트리의 데이터 구조에 맞게 가공해서 core.data에 삽입하면 된다.
parent 필드의 값을 상위 노드의 id로 걸어주면 계층 구조가 만들어진다.
기본 구조는 완성되었다.
사실 이 기능으로만 쓸거면 라이브러리를 쓰는것보다 직접 구현하는게 무거운 라이브러리보다는 낫겠지만
jsTree는 트리구조로 제공하는 것말고도 다양한 기능을 지원한다.
다음엔 여러 기능을 적용한 jsTree를 포스팅해봐야겠다.
공식 문서
jstree
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
www.jstree.com
'Frontend > javascript' 카테고리의 다른 글
| JavaScript Intl API로 날짜, 통화 국제화하기 + 영문자 정렬 (1) | 2024.11.22 |
|---|---|
| JavaScript 다양한 console 객체의 메소드들 (1) | 2024.11.21 |
| JavaScript 디데이 일수 계산하기 (0) | 2024.11.17 |
| 커링(Curring) 기법을 적용한 간단한 JavaScript 함수 만들기 (1) | 2024.11.16 |
| FormData 파일 전송 방법: Blob 그리고 JSON.stringify() (1) | 2024.11.14 |
jsTree는 자바스크립트에서 트리 구조로 데이터를 표현할 때 유용한 jsTree 라이브러리이다.
커스텀할 부분이 많아보이지만 차근차근하기로 하고 오늘은 간단한 사용법에 대해서 알아보자.
CDN 추가하기
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
jsTree를 간편하게 cdn으로 구현해보자. html 내 내부에 위 cdn을 삽입해준다.
jstTree 컨테이너 만들기
<div style="width: 500px; height: 500px; padding: 20px">
<div class="jstree-container" style="height: 100%">
<div id="jstree"></div>
</div>
</div>컨테이너는 기본적으로 최대 width를 가지고 있기 때문에 테스트용 div로 한겹 더 감싸주었다.
컨테이너는 완성되어도 기본적으로 아무 데이터가 없기 때문에 확인할 수 없다.
기본 데이터 추가하기
document.addEventListener("DOMContentLoaded", function () {
$('#jstree').jstree({
plugins: ["core"],
core: {
data: [
{ id: "menu1", parent: "#", text: "메뉴1" },
{ id: "menu1-1", parent: "menu1", text: "메뉴1-1" },
{ id: "menu1-2", parent: "menu1", text: "메뉴1-2" },
{ id: "menu1-2-1", parent: "menu1-2", text: "메뉴1-2-1" },
{ id: "menu2", parent: "#", text: "메뉴2" },
{ id: "menu2-1", parent: "menu2", text: "메뉴2-1" }
]
}
});
});API 통신은 따로 하지 않고 하드코딩으로 짠 더미데이터다.
나중에 서버 데이터를 추가할 때는 트리의 데이터 구조에 맞게 가공해서 core.data에 삽입하면 된다.
parent 필드의 값을 상위 노드의 id로 걸어주면 계층 구조가 만들어진다.
기본 구조는 완성되었다.
사실 이 기능으로만 쓸거면 라이브러리를 쓰는것보다 직접 구현하는게 무거운 라이브러리보다는 낫겠지만
jsTree는 트리구조로 제공하는 것말고도 다양한 기능을 지원한다.
다음엔 여러 기능을 적용한 jsTree를 포스팅해봐야겠다.
공식 문서
jstree
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
www.jstree.com
'Frontend > javascript' 카테고리의 다른 글
| JavaScript Intl API로 날짜, 통화 국제화하기 + 영문자 정렬 (1) | 2024.11.22 |
|---|---|
| JavaScript 다양한 console 객체의 메소드들 (1) | 2024.11.21 |
| JavaScript 디데이 일수 계산하기 (0) | 2024.11.17 |
| 커링(Curring) 기법을 적용한 간단한 JavaScript 함수 만들기 (1) | 2024.11.16 |
| FormData 파일 전송 방법: Blob 그리고 JSON.stringify() (1) | 2024.11.14 |
