jstree 핸들링 방법(이전 선택 값 남아있는 오류)

jstree 핸들링 방법

 

개요

안녕하세요 빈코입니다! 오늘은 jstree를 사용할 때 발생할 수 있는 특정 오류에 대해 포스팅하려 합니다. 해당 포스팅은 jstree의 전반적인 사용법에 대한 내용이 아닌, jstree를 여러 번 호출했을 때 기존에 선택했던 node의 값이 남아있는 문제에 대한 내용을 주로 다뤄 볼 예정입니다.

 

해당 포스팅에서는 jstree를 제거하는 "destory", jstree를 다시 갱신하는 "refresh", jstree에 있는 자식 node를 클릭할 때 함수를 발생시키는 "select_node.jstree"에 대해서 다뤄 볼 예정입니다😃

 

jstree 바인딩 및 특정 함수📙

기본적으로 jstree는 조직도에 많이 쓰이게 됩니다. 트리 형식으로 부서가 나뉘고, 부서 안에서도 사용자들이 있기 때문입니다. 기본 구조는 ajax를 이용해서 비동기 방식으로 데이터를 가져와 html의 특정 id값에 바인딩하는 방식으로 많이 사용합니다.

// html
<div id="groupTree"></div>

 

위 코드처럼 html의 원하는 특정 부분에 원하는 id 값(groupTree)을 선언한 뒤에,

// js

var jsonD;

$.ajax({
   type : "POST",
   async : false,
   url : "json/settings/group/list.do",
   dataType : "json",
   timeout : 30000,
   cache : false,
   error : function(request, status, error) {
      console.log("error:"+error);
   },
   success : function(data) {
      jsonD=data.group;
   },
   beforeSend : function() {
      $('#ajax_loading').show().fadeIn('fast');
   },
   complete : function() {
      $('#ajax_loading').fadeOut();
   }
});

 

js에서 ajax를 이용하여 원하는 데이터를 가져온 후 미리 선언한 jsonD에 값을 넣어줬습니다. 이후에 이 값을 이용해서 jstree에 바인딩시켜줘야겠죠? 아래 코드처럼요!

 

$("#groupTree").jstree({
	core: {
		data: jsonD,
		themes: { responsive: !1 }
	},
		types: {
		"default": { icon: "fa fa-folder icon_state-warning icon_lg" },
		file: { icon: "fa fa-file icon_state-warning icon_lg" }
	,
	plugins: ["types", "search"]
});

 

하지만 해당 코드는 한 번의 트리(조직도)를 불러와서 그저 바인딩하는 코드에 불가합니다. 조직도를 예시로 들었을 때, 클릭한 사용자의 그룹을 변경해야 할 수도 있고, 사용자 리스트들이 나열되어 있는 상태에서 한 개의 모달로 여러 사용자들의 조직도를 보여줘야 할 수도 있습니다. 즉, 쉽게 설명하자면 아까 html에 등록한 "groupTree"라는 id 한 곳에 같은 조직도를 여러번 바인딩시켜야 할 수도 있습니다. 

 

이 상황에서 사용해야 할 jstree 함수가 바로 "destory"와 "refresh"입니다.

var oldTree = $("#groupTree").jstree(true);
if(oldTree) {
   oldTree.destroy();
}

 

코드를 봤을 때, $("#groupTree).jstree(true)는 "groupTree"라는 id값에 jstree가 있을 경우, 즉 undefined가 아닌 경우에 해당 jstree를 반환해 줍니다. 만약에 기존에 jstree가 있다면 해당 jstree를 제거하라는 코드입니다. 이 부분은 이해가 쉬우시죠?

 

다음은 "refresh" 함수입니다.

$("#groupTree").jstree("refresh");

 

이 함수는 기존에 있던 jstree를 다시 그리고, 다시 가져온 tree data를 기존과 비교해서 변경된 내역(node 추가 및 삭제)을 그려줍니다. jstree에서는 사용자의 UI성 편리를 위해 변경된 부분만 추가적으로 다시 그려주는데, 이 때 조심해야 할 부분이 있습니다.

 

'기존에 있던 jstree를 다시 그리고' 이 부분에서 만약 사용자가 기존 트리에서 특정 node를 선택했다면 기존 트리의 해당 이벤트 처리까지 중복되는 현상이 발생합니다. 즉, 사용자가 A라는 사람의 그룹을 변경하기 위해 jstree를 이용하여 특정 그룹을 선택 후 B라는 사람의 그룹을 확인했을 때, 이전에 A 사람의 변경 그룹이 B에게도 똑같이 보인다는 것입니다.

 

그래서 jstree에서 제공하는 "destory"와 "refresh"는 한 쌍을 이뤄서 활동해야 합니다.(jstree를 사용하는 특정 html 공간이 한 곳일 경우)

 

정리해서 설명하자면, 한 곳의 html 공간에 여러 사용자들의 조직도(jstree)를 보여주고 있다면, 화면상 jstree는 덮어씌워진 상태로 한 개로 보일 뿐이지, 동작하는 이벤트 처리는 PC 내부적으로 남아 '이전에 A사람의 조직도에서 선택했던 node(그룹)이 B 사람의 조직도에 그대로 보일 수 있는 오류'가 발생할 수 있다는 것입니다. 그렇기에, 조직도를 'refresh'하기 전에 아까 설명드린 'destory'를 이용하여 이전 jstree를 제거해줘야 합니다.

 

💡 추가적으로 상황에 따라 선택을 모두 지우는 함수인 'deselect_all' 함수로 문제를 해결할 수 있습니다

$("#groupTree").jstree("deselect_all");

 

 

마지막으로 jstree의 자식 node를 클릭했을 때 발생시킬 수 있는 함수는 "select_node.jstree"입니다.

$("#groupTree").bind("select_node.jstree", function(evt, data){
   console.log('data',data); //선택 node 값
});

 

해당 코드를 사용하면 tree에서 특정 값을 선택했을 때 필요한 함수를 정의할 수 있습니다😊

 

해결 방법📒

아래 코드처럼, 이전에 있던 jstree는 명시적으로 코드를 작성하여 제거하고 다시 가져온 jsonD 데이터를 활용하여 tree를 그리기 위해 jstree를 설정하고 refresh를 이용하여 다시 그려줍니다. 그리고 하단에 사용자의 그룹을 변경하는 등 원하는 로직을 넣어주시면 됩니다😃

(저는 destory 코드가 없었어서 중복 오류로 한참 헤맸습니다..ㅠㅠ)

var oldTree = $("#groupTree").jstree(true);
if(oldTree) {
   oldTree.destroy();
}

$("#groupTree").jstree({
   core: {
      data: jsonD,
      themes: { responsive: !1 }
   },
   types: {
      "default": { icon: "fa fa-folder icon_state-warning icon_lg" },
      file: { icon: "fa fa-file icon_state-warning icon_lg" }
   },
   plugins: ["types", "search"]
});

$("#groupTree").jstree("refresh");

$("#groupTree").bind("select_node.jstree", function(evt, data){
		// 해당 node 변경 로직			
});

 

 

마치며

오늘 포스팅은 여기까지입니다! 생각보다 jstree에 대한 자세한 포스팅 글들이 없어서, 비록 저의 개발 과정에서 만난 오류 해결 방법만 포스팅했지만, 누군가에게는 도움이 되었으면 하네요 :) 다음 포스팅은 이전 포스팅에 이어 Spring Message 사용법에 대해 포스팅하겠습니다🙂

 

---

👨‍👩‍👦‍👦 오픈채팅방 운영

취업을 준비하는 예비 개발자분들을 위한 질문&답변할 수 있는 공간을 만들었습니다. 취업과 이직을 하기 위해서 어떤 걸 중점적으로 준비해야 하는지부터 포트폴리오&이력서 작성법 등 다양한 질문들을 받고 답변을 드립니다. 참여하셔서 다양한 정보 얻고 가시면 좋을 것 같네요😁

 

참여코드 : 456456

https://open.kakao.com/o/gVHZP8dg

비전공 개발자 취업 준비방(질문&답변)

 

---

👨‍💻 전자책 출간

아울러 제가  🌟비전공자에서 2년만에 보안 전문 중견기업으로 이직 한 방법들을 정리한 전자책을 출간하게 되었습니다. 어떤 걸 공부해야 하는지, 이직을 위해서 무엇을 준비해야 하는지, 제가 받았던 기술 면접 리스트 등 다양한 목차로 구성되어 있습니다. 또한, 구매 시 1:1 채팅을 이용하여 포트폴리오 첨삭을 도와드리고 있습니다. 🐕전자책으로 얻은 모든 수익은 유기견 센터 '팅*벨 입양센터'에 후원될 예정입니다. 관심 있으신 분들은 아래 링크를 참고해 주세요😁

https://kmong.com/gig/480954

비전공개발자 2년만에 중견기업 들어간 방법 | 14000원부터 시작 가능한 총 평점 0점의 전자책, 취

---

 

관련 포스팅

* [ jstree ] 상하위 노드 입맛대로 선택하는 방법

* [ jstree ] 대용량 데이터 처리하기