jsTree 우측 클릭 메뉴 Contextmenu plugin 사용법

 

 

jsTree 항목을 우측 클릭했을때 나오는 메뉴들을 구현해보았다.

대충 이런 모습

 

 

 

소스는 대략 아래와 같다.

 

$('#tree').jstree({
   //plugins에 contextmenu 추가
   'plugins' : ["contextmenu"],
   'contextmenu' : {
      "items": function($node) {
        	var tree = $("#tree").jstree(true); // tree 변수
        	return {
                 "Menu1": {
                      "separator_before": false,
                      "separator_after": true,
                      "label": "새로운 그룹(폴더) 추가", //메뉴 표기 (제목)
                      "icon": 'menu1', //menu icon
                      "_disabled": $node.type == "file", //해당노드 type이 file이면 해당 메뉴를 disable 처리한다
                      action: function (obj) { 
                       //해당 메뉴를 눌렀을때의 액션
                      
                       //노드를 새로 생성한다.
                       $node = tree.create_node($node, {id:'new_'+ newCnt++, text: '새 그룹(폴더)', type: 'default'});
                       //모든 선택 해제
                       tree.deselect_all();
                       //새로 만든 노드 select
                       tree.select_node($node);
                      }
     			},
                 "Menu2": {
                      "separator_before": false,
                      "separator_after": true,
                      "label": "수정하기",
                      "icon": 'menu2',
                      "_disabled": $node.state.disabled, //노드 state에 따라 비활성화
                      action: function (obj) {
                       //tree에 해당 노드를 수정모드로 
                       tree.edit($node);
                      }
                 },
                 //기타 등등 메뉴들...
            }
      }    
})

 

 

1. plugins에 Contextmenu를 추가한다.

2. item에서 넘어오는 $node는 메뉴 클릭할 때 선택한 node를 가르킨다. 

3. return 항목에 메뉴들을 정의한다.

4. 메뉴에 action에 메뉴를 클릭하면 실행할 코드를 넣는다 

 

 

기타 메뉴에 나와있는 삭제 및 이동하는 함수들 정리는 여기서 👇

https://raon0229.tistory.com/125

jstree 활용 및 함수 정리