fancytree

프로젝트를 하면 조직도등의 표현에 Tree 컴포넌트를 사용하는 것은 거의 필수에 가깝당!
Tree로 유명한 것은 jqTree, jsTree, fancyTree, zTree가 있고, zTree가 나중에 등장해서 좋아보이기도 하고,
문서도 나름 잘 되어 있어 보이지만, 읽어야 할 양이 많당.
한번 세팅되면 급격히 관심이 없어지지만, 일단 fancyTree부터 정리 한번 해보장

1. 설치

    <script src="//cdn.jsdelivr.net/gh/jquery/jquery@3.6.4/dist/jquery.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.3/skin-win8/ui.fancytree.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.3/jquery.fancytree-all-deps.min.js"></script>

2. 기본

    일단 백엔드 없이 구동되는 모습을 확인해 보장 싫음 말공!

   그냥 JSON 데이터, key와 title  속성에 집중해 본당!

    <div id="tree">
    </div>
    <script>
        $(() => {
            const tree = $("#tree").fancytree({
                extensions: ['edit', 'filter'],
                source: [
                    { "key": "101", "title": "HYBE", "addr": "거기", "ceo": "방시혁" },
                    { "key": "102", "title": "YG", "addr": "저기", "ceo": "양현석" },
                    { "key": "103", "title": "JYP", "addr": "요기", "ceo": "박진영" },
                    { "key": "104", "title": "SM", "addr": "고기", "ceo": "이수만" }
                ]
            });
        })
    </script>

 

 AJAX 데이터

data.json 파일에 위 source 속성의 배열을 저장한 후 실행!

    <div id="tree">
    </div>  
    <script>    
        $(() => {
           const tree=$("#tree").fancytree({
                extensions: ['edit', 'filter'],
                source: {
                    url:"./data.json",
                    caches: false
                }
            });
        })
     </script>

3.   data.json을 조금 수정해서 클릭했을 때 하위(children) 요소들을 가져 오도록 수정해 보장.

  "lazy":true 에 주목하장 (lazyLoad 콜백함수와 연동 할 것이당)

{ "key": "100", "title": "HYBE", "addr": "거기", "ceo": "방시혁", "lazy":true },
{ "key": "200", "title": "YG", "addr": "저기", "ceo": "양현석", "lazy":true },
{ "key": "300", "title": "JYP", "addr": "요기", "ceo": "박진영" },
{ "key": "400", "title": "SM", "addr": "고기", "ceo": "이수만" }

hybeIdol.json 파일을 맹글장(하이브소속 아이돌이당)

[
    { "key": "101", "title": "BTS",  "leader": "RM" },
    { "key": "102", "title": "SevenTeen", "leader": "우지" },
    { "key": "103", "title": "NewJeans", "leader": "민지" }
]

ygIdol.json 파일을 맹글장(YG소속 아이돌이당)

[
    { "key": "201", "title": "BlackPink",  "leader": "제니" },
    { "key": "202", "title": "BabyMonster", "leader": "아현" },
    { "key": "203", "title": "BigBang", "leader": "지드래곤" }
]

lazyLoad 콜백함수를 추가하장(가독성을 위해 귀찮지만, 코드 전부 다시 표시)

lazyLoad:function(...) 에 집중!!

data.result가 재밌당. 그 안 url속성에 컨트롤러 URL을 적어 주면 get방식으로 요청해서

돌아온 결과값들을 자식으로 넣어준당!

처음부터 모든 tree값을 가져오지 않고, 필요할 때만 가져오는 방식으로 사용할 수 있당!

    <div id="tree">
    </div>
    <script>
        $(() => {
            const tree = $("#tree").fancytree({
                extensions: ['edit', 'filter'],
                source: [
                    { "key": "100", "title": "HYBE", "addr": "거기", "ceo": "방시혁", "lazy":true },
                    { "key": "200", "title": "YG", "addr": "저기", "ceo": "양현석", "lazy":true },
                    { "key": "300", "title": "JYP", "addr": "요기", "ceo": "박진영" },
                    { "key": "400", "title": "SM", "addr": "고기", "ceo": "이수만" }
                ],
                lazyLoad: function(event,data){
                    console.log("check",data.node);
                    if(data.node.key == "100"){
                        data.result = {
                            url:"hybeIdol.json"
                        }
                    }

                    if(data.node.key == "200"){
                        data.result = {
                            url:"ygIdol.json"
                        }
                    }

                }
            });
        })
    </script>

꼬옥 눈으로 확인하장!

 

4. tree 객체 가져오깅

fancyTree는 문서가 잘 정리되어 있진 않지만, 아래와 같은 부분을 찾을 수 있당!

지친당!. 하지만 이번 기회에 읽고 말것이당

var tree = $.ui.fancytree.getTree("#tree");

예제

https://wwwendt.de/tech/fancytree/demo/index.html

 

통합

https://github.com/mar10/fancytree/wiki/TutorialIntegration

 

Static API

https://wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree_Static.html

 

노드데이터

https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#NodeData

 

데이터로딩

https://github.com/mar10/fancytree/wiki/TutorialLoadData

 

사용가능 옵션

https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions

 

샘플 설정

https://wwwendt.de/tech/fancytree/demo/sample-configurator.html

 

이벤트 리스트

https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeEvents

 

data 오브젝트

https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#EventData

 

튜토리얼API

https://github.com/mar10/fancytree/wiki/TutorialApi

 

확장플러그인

https://github.com/mar10/fancytree/wiki/ExtensionIndex

 

플러그인 사용법

https://github.com/mar10/fancytree/wiki/TutorialExtensions

 

잘 안되는 애, 필요한가?

https://github.com/swisnl/jQuery-contextMenu/tree/master/dist