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

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이라는 주석 부분에 위치하게 될거에요. 그럼 아래로 좀 내리시다 보면 이런 코드가 보입니다.

빛삭해주시면되요.

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

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

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

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