[jsTree] jstree 마우스 우클릭 서브메뉴(contextmenu) 사용하기 (ft. Contextmenu plugin)

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

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

앞선 글에서 드래그앤 드롭 플러그인에 대해 설명할때 기본적인 설명이 포함되어있으니 같은 설명은 하지 않겠다.

plugins : contextmenu 를 선언해주고

당연히 check_callback : true 를 선언해주면 바로 기본적인 contextMenu를 사용할 수 있다.

jstree 에서 기본적으로 contextmenu를 사용할때 제공하는 기능들이다.

물론 사용자가 contextmenu 내용을 수정하여 사용 가능하다.

아래와 같이 "contextmenu"를 따로 작성해주면 된다.

$('#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" },
		],
		"check_callback" : true
	},
	'plugins' : ["contextmenu"],
	'contextmenu' : {
		"items" : {
			"test" : { //사실상 "test"라는 이름은 변수에 가깝기 때문에 뭐든 상관없다 생각한다.
        		"separator_before" : false,
				"separator_after" : true,
				"label" : "신규메뉴",
				"action" : function(obj){alert('메뉴테스트')}
			},
			"test1" : {
				"separator_before" : false,
				"separator_after" : true,
				"label" : "신규메뉴2",
				"action" : function(obj){alert('메뉴테스트2')}
			}
		}
	}  
});

"contextmenu" 에서 사용가능한 options는 공식홈에서 안내해주고있다.

출처 : jstree contextmenu options

separator_before - a boolean indicating if there should be a separator before this item

separator_after - a boolean indicating if there should be a separator after this item

_disabled - a boolean indicating if this action should be disabled

label - a string - the name of the action (could be a function returning a string)

title - a string - an optional tooltip for the item

action - a function to be executed if this item is chosen, the function will receive

icon - a string, can be a path to an icon or a className, if using an image that is in the current directory use a ./ prefix, otherwise it will be detected as a class

shortcut - keyCode which will trigger the action if the menu is open (for example 113 for rename, which equals F2)

shortcut_label - shortcut label (like for example F2 for rename)

submenu - an object with the same structure as $.jstree.defaults.contextmenu.items which can be used to create a submenu - each key will be rendered as a separate option in a submenu that will appear once the current item is hovered