[jsTree] jstree 드래그 앤 드롭(dnd) 적용하기 (ft. Drag & drop plugin)

 

[jsTree] jstree 드래그 앤 드롭(dnd) 적용하기 (ft. Drag & drop plugin)

jstree에서는 다양한 plugin을 제공해주는데 그중에 하나가 "dnd" 이다. 예제를 통해 알아보자. $('#tree').jstree({   'core' : {     'data' : [       { "id" : "ajson1", "parent" : "#..

mine-it-record.tistory.com

기존에 jstree 드래그 앤 드롭 플러그인에 대해 작성한 적이 있는데 

더 나아가 이동 시점에 대한 이벤트를 감지 및 처리하는 방법에 대해 알아보자.

 

기본적인 설정은 위에 있는 링크를 타고 가면 알 수 있으며

이벤트 처리에 대해서만 정리하고자 한다.

 

jstree에는 이벤트를 바인딩 시켜주는 구문이 존재하는데 그걸 사용할 것이다.

$('#tree').bind("move_node.jstree", function(e, d) {
    console.log(e); //event
    console.log(d); //node
});

위에서 console.log()로 찍어준 "d"에 대해 가볍게 알아보자면 다음과 같은 결과가 나온다.

node에 대한 정보인데 여기서 데이터를 뽑아다 쓰면 될 것이다.



기존의 뽑아쓰던 node 데이터와 좀 다른점들이 보이는데 여기서 중요한 정보들은

old로 되어있는 정보들이다.

이동하기 전의 정보를 보여준다. parent, positon 등

 

move_node.jstree 이벤트를 통해 node 에 추가로 더해진 데이터들은 공식홈에서 목록을 제공해주고 있다.

위 노드 이동 감지 이벤트와 주어진 데이터들을 활용하여 제어하면 될 것이다.

 

참고 : www.jstree.com/api/#/?f=move_node.jstree

반응형

 

★jstree 그 외 유용한 함수 모음

★jstree 선택한 node 정보 가져오기

★jstree 단축키를 활용한 node 다중 선택

 

jstree에 선택을 제공해준다면 당연히 해제하는것도 제공해준다.

전부 선택해제 시켜주는건데 예제를 통해 가볍게 알아보자.

 

▶javascript

$('#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" },
    ]
  } 
});

이번에도 역시 따로 해줄건없고 위와같이 선언해준다음

아래 이미지처럼 선택을 한 뒤



아래와 같이 deselect_all 을 실행시켜주면 된다.

$('#tree').jstree("deselect_all");

반응형

사실 보면 진짜 별거 아닌데 검색할때 잘 안나와서 정리해둔다.

(물론 영어로 검색하니까 바로 나오긴 하더라.)

 

▶javascript

$('#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" },
    ]
  } 
});

 

그냥 하던데로 jstree를 만들어주고나서 따로 해줄건없다. 자체내에서 제공해주는 기능이기때문에

 

ctrl / shift + click 

컨트롤이나 쉬프트를 눌러주고 클릭해주면 다중선택이 된다.

단축키를 누르지 않고 다중 선택하는 방법에 대해서는 찾지를 못했지만 이런식으로 그냥 제공해줘도 괜찮다 생각된다.

반응형

★jstree 그 외 유용한 함수 모음

 

jstree를 사용할 때 선택한 node의 정보를 가져오는 방법에 대해 알아보자.

 

plugins과 다르게 따로 뭔가를 설정해줄 필요없이 바로 가져오는게 가능하다.

예제를 통해 쉽게 알아보자.

 

▶javascript

$('#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" },
    ]
  } 
});

 

저런식으로 jstree를 만들면 위 이미지처럼 나오는데 선택을 하게 되면 이미지처럼 파란색으로 칠해지게된다.

버튼으로 따로 만들던가 어느 반응을 하는곳에서 아래와 같이 선언만해주면 선택된 정보들을 가져올 수 있다.

$('#tree').jstree('get_selected',true)

 

console.log를 보면 알겠지만 jstree('get_selected', true); 를 사용하게되면

배열로 반환되는것으로 짐작했겠지만 선택한 모든 노드 정보들을 가져온다.

반응형

jstree 에서 제공하는 plugin중에 하나인 search에 대해 알아보자

영어단어 그대로의 의미인 검색기능을 제공해주는 플러그인인데 사용방법은 간단하다.

$('#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" },
		]
	},
	'plugins' : ["search"],
});

이런식으로 여타 플러그인 사용하는것처럼 plugins 부분에 search를 선언해주면 끝이다.

search의 효과는 공식홈에서 안내하는것처럼 matching nodes를 표시해준다.

 

This plugin adds the possibility to 
search for items
 in the tree and even to show only matching nodes.

 

당연히 search를 선언했다고 바로 되는건 아니고 아래와 같이 사용해야한다.

$('#tree').jstree(true).search(text);

이런식으로 search함수에 검색어를 넣어서 사용한다.

예를들어 검색어를 입력할때마다 감지한다던가, 검색어 버튼을 감지한다던가 하면될것이다. 결과는 아래와같이 나온다.



추가적으로 search 플러그인 역시 무수한 옵션들이 존재하는데 그중에 두가지를 다뤄보자면

search 옵션 : https://www.jstree.com/api/#/?q=$.jstree.defaults.search

검색결과만 트리에 보이는 옵션과 검색결과의 자식요소도 보이는 옵션을 다룰것이다.

"plugins" : ["search"],
"search" : {
    "show_only_matches" : true,
    "show_only_matches_children" : true,
}

show_only_matches 와 show_only_mathces_children 옵션이다.

대략 아래와 같은 결과가 나온다.

반응형

jstree 에서 제공하는 plugin중에 하나인 wholerow plugin 에 대해 알아보자.

이번에 알아볼 wholerow는 사실 가볍게 사용할 수 있는거라 그렇게 어렵지않다.

 

$('#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" },
		]
	},	
	'plugins' : ["wholerow"],
});

 

이렇게 그냥 plugins 부분에 wholerow만 선언해주고 사용하면 된다.

무슨 기능이냐 하면 공식홈에서 안내해주는것처럼

 

Makes each node appear block level which makes selection easier. May cause slow down for large trees in old browsers.

 

tree node 클릭을 편하게 해주기 위함이라고 생각하면 된다.

(단점은 데이터가 많아지면 속도가 느려질 수 있다는 점이며)

 

비교를 해보자면 일반적으로 아래와 같이 node에 마우스를 올려놔야 클릭이 가능하지만



wholerow를 사용하게 되면 아래와 같이 node row에 마우스를 올려놓기만해도 클릭이 가능하다.



개인적으로 단점이라 생각되는 점은 node 옆 트리 표시가 나타나지 않는다는 점일까나?

반응형