dev/JavaScript

[jsTree] jsTree 사용해보기

아디봉 2021. 3. 3. 23:48

프로젝트에서 jsTree로 개발되어있는 프로젝트가 있는데 버전마다 사용법이 다른거 같아서 .. 개념잡기 위해 테스트 해본걸 남겨놓는다. 

eclipse로 cdn 연결해서 테스트 했으니 인터넷 안되는 환경에서는 다운로드 받아서 하시길..

 

jsTree 공식사이트

www.jstree.com/

 

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>

 

jsTree 테스트

 

인터넷 참고테스트 

<!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>

 

jsTree 인터넷 참고 test