프로젝트에서 jsTree로 개발되어있는 프로젝트가 있는데 버전마다 사용법이 다른거 같아서 .. 개념잡기 위해 테스트 해본걸 남겨놓는다.
eclipse로 cdn 연결해서 테스트 했으니 인터넷 안되는 환경에서는 다운로드 받아서 하시길..
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
공식사이트 버전 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- jsTree theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<div id="jstree">
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- jsTree -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
$('#jstree').jstree();
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
</body>
</html>
인터넷 참고테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- jsTree theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<div id="tree"></div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- jsTree -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
$('#tree').jstree({
'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
]
}
});
});
</script>
</body>
</html>
'dev > JavaScript' 카테고리의 다른 글
| [jsTree] 함수 정리 (0) | 2021.03.11 |
|---|---|
| [jsTree] jsTree plugin 알아보기 (0) | 2021.03.04 |
| jQuery Code Assist (jQuery 코드 자동완성) (0) | 2017.05.06 |
| 여러가지 객체사용법 2 (0) | 2017.04.27 |
| 여러가지 객체사용법 1 (0) | 2017.04.27 |
