[JSTREE] ContextMenu의 Default Menu를 없애기

지금 사내 프로젝트 하다가 보니

jsTree를 쓰게 됐어요. 원래 이런거 자주 쓰잖아요.

요즘에 Tree 플러그인이 많긴한데 그냥 평범한 jsTree를 사용하기로 했어요.

사용법은 다들 아시다시피

jquery는 무조건 import 하셔야 하구요.

다음은 선택적으로 사용하실 수 있는데

아래와 같아요.

1. cookies

jsTree can save the user's current view in a cookie - for more on the cookie options - check the documentation. To see it in action - make a selection (or open/close a node) and refresh the page.

설명은 위에 것과 같네요.

음 .. 현재 사용자의 화면을 쿠키에 저장하네요. 옵션이 더 제공되니까 문서를 확인해보랍니다. 페이지를 새고로침해도 사용자가 선택했던 내용을 저장하고 있나봅니다. 고로 선택했던 노드를 펼쳐주겠네요.

<script src="<c:url value='/js/lib/jstree/jquery.cookie.js' /> "></script>

2. HotKey

Try pressing up/down/left/right/del.  You can attach the enable command to the onfocus event if you will - that way if the user clicks anywhere inside the tree container shortcuts will start working.

이건 음 ..상하좌우나 del ? 한번도 안눌러봤는데 ㄷㄷ.. 지워지나.. 여튼 상하좌우 키를 클릭하게되면 트리에서 상하로 이동하거나 좌우로 펼치고 접고 하는 기능을 붙일 수 있어요. 근데 사실 거의 마우스로 클릭하지 트리에 놓고 키보드는 잘 안쓰더라구요. 고객 요청사항에 이런건 있었어요.

트리 보면 화살표를 눌러야 펼쳐지는데 그러지 말고 그냥 element를 클릭해도 펼쳐지게 해달라는 ㅋㅋ 여튼 그렇습니다.

<script src="<c:url value='/js/lib/jstree/jquery.hotkeys.js' /> "></script>

3. jstree

jstree 코어 js 입니다. 이게 없으면 jsTree를 못쓰죠. 사용하고자 한다면 반드시 임포트해야 할 파일입니다.
<script src="<c:url value='/js/lib/jstree/jquery.jstree.js' /> "></script>

 

자 그럼 본론으로 돌아가서 ..

jstree의 contextMenu를 사용하려고 하는데

아래 소스와 같이 하나만 쓰고 싶었거든요 ?

근데 나오기는 아래와 같이 자꾸 Rename, Delete, Edit ccp 메뉴가 Defalut로 계속 나오더라구요. 그래서 구글링해보니 jsTree.js를 바꾸라는건 잘 안나오더라구요.

그냥 버그라고만 여러개를 사용하실 것 같으면 상관없어요. 그냥 Label만 바꿔서 쓰면 되니까요. 근데 전 하나만 써야되서요.

jsTree.js를 열어봅니다.

검색을 하는데 "contextMenu"로 검색을 하면 contextMenu Plugin이라는 주석 부분에 위치하게 될거에요. 그럼 아래로 좀 내리시다 보면 이런 코드가 보입니다.

빛삭해주시면되요.

그렇게 적용하고 '쨘'~ 이렇게 나왔네요.

원하던 그림대로 나왔어요. 그럼 이제 코딩 계속하면 되겠네요.

 

 

별건 아닌데 참 길게도 썼네요. ㅋㅋ 그냥 저것만 지우면 되요 ~ 그러면 끝인데요.

오늘 하루도 수고하셨습니다 ~