[js/jQuery] jsTree, TreeView

https://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.

 

jsTree는 jQuery 플러그인이며, 상호적인(대화형) 트리를 제공한다.

jsTree는 쉽게 확장할 수 있고, 설정할 수 있으며, HTML과 JSON 데이터 소스와 AJAX 로딩을 지원한다.

 

treeView

var jsonData = [
	{ "id" : "test1", "parent" : "#", "text" : "One Directory" },
	{ "id" : "test2", "parent" : "#", "text" : "Node Directory" },
	{ "id" : "test3", "parent" : "test2", "text" : "Child 1" },
	{ "id" : "test4", "parent" : "test2", "text" : "Child 2" }
];

$("#menu").jstree({
	'core' : {
    	data : jsonData,
        "cehck_callback" : true,
        'themes' : {
		"theme" : "default",
		"dots" : false,
		"icons" : false
        }
    },
    'types' : {
    	"root" : {
        	"icon" : { "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" }
    	}
    },
    'plugins' : [
    	'dnd', 'search', 'types', 'themes'
    ]
})
.on('loaded.jstree', function(event, data){
	$("#menu").jstree('open_all');
});

 

jsTree에 추가할 plugins 도 공식문서에서 예시를 찾아, 활용할 수 있다.

https://old.jstree.com/documentation

jsTree » Documentation

 

---

참고사이트

 

https://developing-stock-child.tistory.com/38

[JavaScript] jsTree plugin으로 TreeView 구현

 

https://bongjava.tistory.com/entry/jsTree-jsTree-plugin-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

[jsTree] jsTree plugin 알아보기

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=qqiwan&logNo=221481422594 

[Javascript] jsTree 사용법 및 Tree 자료구조