[jsTree] 내가 보려고 작성한 jsTree 활용법

안녕하세요.

오늘은 jQuery를 기반으로 트리 형식을 제공해주는 jsTree에 대해 작성하려고 하는데요!

생각보다 jsTree에 대한 정보가 많이 없어 개발할 때 어려움을 겪었던 적이 있어서

나중에 필요할 때 빠르게 찾고 한 번에 모아 보기 위해 기록한 글입니다.

이 글은 jsTree 기초를 알고 있다는 전제하에 작성하였습니다!

• 정보는 계속 업데이트 할 예정입니다:)

<div id="theTree" style="width:400px; height:250px;"></div> // jsTree

<div>
	<button onclick="exCreate();" class="btn btn-primary">create</button>
	<button onclick="exRename();" class="btn btn-warning">rename</button>
	<button onclick="exDelete();" class="btn btn-danger">delete</button>
</div>

Create 버튼 클릭시 노드 생성

function exCreate() {
	var ref = $('#theTree').jstree(true),
	sel = ref.get_selected();
		    
	if (!sel.length) {
		return false;
	}
		    
	sel = sel[0];
		    
	sel = ref.create_node(sel, {
		"type": "file"
	});
		    		    

	ref.edit(sel);		    		  	
};

Rename 버튼 클릭시 노드 이름 변경

function exRename() {
	var ref = $('#theTree').jstree(true),
	sel = ref.get_selected();
		    
	if (!sel.length) {
		return false;
	}
	sel = sel[0];
		    
	ref.edit(sel);
};

Delete 버튼 클릭시 해당 노드 삭제

function exDelete() {
	var ref = $('#theTree').jstree(true),
	sel = ref.get_selected();
		   
	if (!sel.length) {
		return false;
	}
		    
	ref.delete_node(sel);
};

jsTree 전체 오픈

$("#theTree").jstree("open_all"); // theTree 전체 오픈 

refresh 할 때는 트리를 최초 생성할 때 아래 문구 추가

.bind("refresh.jstree", function (e, data) { 
	$(this).jstree("open_all");
});

jsTree 노드 선택 이벤트

$('#theTree').bind('select_node.jstree', function(event, data){
	// 노드를 선택했을 때 적용할 코드 작성
});

jsTree 노드 드래그 앤 드롭

"plugins": ["contextmenu", "dnd", "search", "state", "types", "wholerow","cookies"]

jsTree 생성 시, 플러그인에 “dnd” 추가

"core": {
	"animation": 0,
	"check_callback": true,
	 "force_text": true,
	 "themes": {
			"stripes": true
	 },

코어 밑에 있는 “check_callback” : true 설정

"check_callback": (operation, node, node_parent, node_position, more) => {

	// 드래그한 노드를 드롭할 때 실행되는 코드
	if (operation === "move_node" && more.ref === undefined) {
													
		// TO DO
	 console.log("[node_parent] : "+JSON.stringify(node_parent)); // 선택한 노드에 대한 부모 노드 정보
	 console.log("[node_position] : "+node_position); // Drop 위치
	 console.log("[drop data] : "+JSON.stringify(node.original)); // Drop Data
	                  
	 return true; // return false;는 Drop 되지 않음

	} // if
	
	 return true;
											
}

코어 밑에 “check_callback”을 추가하여 코드 작성