jsTree 사용법 🌳

jsTree는 tree구조 표현이 간단한 api이다.

다양한 사용법은 jsTree 참조 https://www.jstree.com/

 

1. json 데이터로 세팅하기

 

백엔드나 프론트엔드 개발을 하려면 json 데이터로 세팅하는 경우가 제일 많으니까 이 부분만 공부했다.

 

전체 소스 코드

        let jsonData = [{
                            "parent": "#",
                            "menuOrder": "2",
                            "menuDepth": "2",
                            "id": "3002",
                            "text": "갈수있어"
                        },
                        {
                            "parent": "3002",
                            "menuOrder": "1",
                            "menuDepth": "2",
                            "id": "4009",
                            "text": "해외로"
                        },
                        {
                            "parent": "3002",
                            "menuOrder": "2",
                            "menuDepth": "2",
                            "id": "4011",
                            "text": "바다로"
                        },
                        {
                            "parent": "3002",
                            "menuOrder": "3",
                            "menuDepth": "2",
                            "id": "4010",
                            "text": "집으로"
                        },
                        {
                            "parent": "3002",
                            "menuOrder": "4",
                            "menuDepth": "2",
                            "id": "4000",
                            "text": "밭으로"
                        },
                        {
                            "parent": "4000",
                            "menuOrder": "1",
                            "menuDepth": "3",
                            "id": "4013",
                            "text": "22222222"
                        },
                        {
                            "parent": "4000",
                            "menuOrder": "2",
                            "menuDepth": "3",
                            "id": "4014",
                            "text": "3333333"
                        },
                        {
                            "parent": "3002",
                            "menuOrder": "5",
                            "menuDepth": "2",
                            "id": "4012",
                            "text": "우주로"
                        },
                        {
                            "parent": "3002",
                            "menuOrder": "6",
                            "menuDepth": "2",
                            "id": "4001",
                            "text": "여기로"
                        }
                        ];
        $(function () {
            $('#jstree').jstree({
                'core' : {
                "animation" : 0,
                "check_callback": true,
                'data' : jsonData
                }
            });
        });

    

 

id=jstree 태그에 데이터 넣기

<div id="jstree"></div>

태그로 선언하면 영역은 다 잡은것이다.

이제 스크립트로 jstree에 데이터를 선언하면 된다.

 

<script>
$('#jstree').jstree({
        'core' : {
        "animation" : 0,
        "check_callback": true,
		'data' : jsonData
	}
});
</script>

'data' 에 json으로된 데이터를 넣으면 바로 출력이 된다.

 

 

 

id / text / parent 는 예약어라서 커스텀 없이 데이터를 잘 맞추어야 하고

parent의 root 데이터도 # 으로 예약어다.

이걸 몰라서 초반에는 아주 많이 헤맸다.

 

{
"parent": "#",
"menuOrder": "2",
"menuDepth": "2",
"id": "3002",
"text": "갈수있어"
},

위에 node는 parent가 # 이라서 root가 되는 예약어이다.

아래 node는 parent가 위 node의 id와 같기 때문에 해당 node의 자식이 된다.

 

{
"parent": "3002",
"menuOrder": "4",
"menuDepth": "2",
"id": "4000",
"text": "밭으로"
},

아래 node의 parent는 위 node의 id와 같기 때문에 밭으로 node의 자식이 된다.

 

{
"parent": "4000",
"menuOrder": "1",
"menuDepth": "3",
"id": "4013",
"text": "22222222"
},

기본 사용법은 간단하기 때문에, 이제 응용 사용법을 익히면 된다.

 

2. 응용 사용법

node 의 이미지 바꾸기

이미지를 바꿀 때는 types 를 추가하여 지정해 줄 수 있다.

<script>
        $(function () {
            $('#jstree').jstree({
                'core' : {
                "animation" : 0,
                "check_callback": true,
                'data' : jsonData
                },
                "plugins": ["types"],
                "types" : {
                    "default" : {
                    "icon" : "fa fa-folder text-primary"
                    },
                    "file" : {
                        "icon" : ".jstree-themeicon-custom.ico-file"
                    }
                },
            });
        });
</script>

 

 

 

 

원하는 이미지나 class를 넣어서 프로젝트에 맞게 설정할 수 있다.

 

드래그 앤 드롭 적용하기

 

node에 드래그 앤 드롭을 적용하면 마우스로 node들의 위치를 변경할 수 있다.
그런데, 이 기능을 지원한 이후에.. 어떤 이벤트 저장 등을 넣기 위해서는 꽤나 많은 생각과 노력을 기울여야 한다.

추가하는 방법은 plugins 에 dnd 옵션을 추가하면 된다.

<script>

"plugins": ["types", "dnd"],

</script>

 

드래그 앤 드롭 이후 이벤트 추가 하기

 

드래그 앤 드롭을 적용하고 나면 이벤트가 종료 이후에 어떤 node로 움직이고,
부모 node는 어떻게 변경이 되었는지 현재 나의 위치는 어디인지를 확인하는 코드를 추가한다.

<script>

            $('#jstree').on('move_node.jstree', async function (e, data) {
               
                if (data.node != null) {
                    console.log(data.node);
                    
                }
            });

</script>

아래 이미지처럼 드래그해서 위치를 옮기면 log를 찍어 본다.

 

 

 

 

log에서 변경된 node의 새로운 부모를 확인할 수 있다.
이런 응용만 있으면 무엇이든 만들어 낼 수 있다.

 

node 클릭 적용하기

 

노드를 움직이지 않고 클릭만 했을 때, node의 정보를 log로 출력해 보기

활용해서 node의 상세 페이지를 만들어 볼 수 있다.

<script>

            $('#jstree').on('changed.jstree', async function (e, data) {
                if (data.node != null) {
                    console.log(data.node);
                }
            });

</script>

 

node를 추가해보기

 

json 데이터를 추가해서 refresh 할 수도 있지만,
jstree의 기능을 활용해서 추가해 본다.
plugins에 contextmenu를 추가하면 node를 우클릭했을 때, 이벤트를 줄 수 있다.

<script>

"plugins": ["types", "dnd", "contextmenu"],

</script>

 

기본 옵션이 있는데 만들고 삭제하는 CRUD가 있지만, 원하는 방향으로 커스텀이 가능하다.

아래는 만들고 삭제하는 다양한 옵션에 대한 설명.

{
// Some key
"rename" : {
// The item label
"label" : "Rename",
// The function to execute upon a click
"action" : function (obj) { this.rename(obj); },
// All below are optional
"_disabled" : true, // clicking the item won't do a thing
"_class" : "class", // class is applied to the item LI node
"separator_before" : false, // Insert a separator before the item
"separator_after" : true, // Insert a separator after the item
// false or string - if does not contain / - used as classname
"icon" : false,
"submenu" : {
/ Collection of objects (the same structure) /
}
}
/ MORE ENTRIES ... /
}

 

이 정도 했다면 어느 정도 응용이 가능한 상태.

나머지는 각자 화이팅 하도록 한다.

jstree말고도 자주 사용하는 tree는 네이버의 toast tree api https://nhn.github.io/tui.tree/latest/
가 있는데, 직접 써보니 네이버 꺼는 너무 어렵다.

나만 불편한가...

대부분 gpt에서 물어보면서 진행하면 금방 할 것 같다고 생각이 든다.

그런데, 아직 gpt가 jstree는 꼭 잘 못 알려주더라.