Jstree 사용해서 그룹 트리 만들기

메뉴 또는 그룹등을 트리 구조로 만들때 jsTree를 사용해서 간단하게 만들수가 있습니다.

jsTree를 사용하기 위해선 우선 jsTree 라이브러리를 설치해야합니다.

이 라이브러리는 jQeury를 상위로 먼저 호출을 해야지 사용할 수 있습니다.

구조상으로 보면 아래와 같습니다.

 

<script type="text/javascript" src="../_lib/jquery.js"></script> <script type="text/javascript" src="../_lib/jquery.cookie.js"></script
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script> <script type="text/javascript" src="../jquery.jstree.js"></script>
제일 상위에 jquery, 그 아래로 jstree와 jstree에서 사용할 plugin들을 나타냅니다.

 

## Code 설명

​- 트리구조는 json형식으로 ajax통신을 이용해서 구현을 했습니다. 

- 그외 필요한 기능은 bind를 걸어서 사용하도록 했습니다.

- 기본적은 구조는 old.jstree.com에서 제공하는 구조이고 필요한 부분만 수정을 했습니다.

- 위에 사용된 라이브러리는 old.jstree.com에서 다운받았습니다.

 

<div  id="demo"></div>

 

<script type="text/javascript">

$(function () {

var $target = $("#demo");

var params = {};

$target

.jstree({

"json_data" :

{

"ajax" : 

{

"type" : "POST",

"data" : function(node) {

return params;

},

"url" : function(node) {

// node로 들어온 값이 없으면 _json/depth1.json파일에서 데이터를 가져옵니다.(select 또는 open이 되지 않은 첫로딩시..같은 경우)

// node는 node가 select 될때 open될때 ajax를 호출하면서 자동으로 들어옵니다.

return node.attr ? "../_json/depth2.json" : "../_json/depth1.json";

}

,"success" : function(node){

console.log("success:"+JSON.stringify(node));

}

}

}

,"plugins" : [ "themes", "json_data", "ui", "sort", "types", "crrm", "cookies", "contextmenu", "search" ]

,"themes" :

{

// 기본적으로 제공하는 테마(테마 역시 다운받아서 설치해야한다)

"theme" : "classic",

}

,"contextmenu":

{

// 마우스 오른쪽 클릭시 나오는 메뉴

"items" : {}

}

,"core" : {"animation" : 50, "strings": { loading : "Loading ...", new_node : "새그룹" }}

})

.bind("loaded.jstree", function (event, data) {

console.log("loaded.jstree");

// load후 처리될 event를 적어줍니다.

})

.bind("select_node.jstree", function (event, data) {

console.log("select_node.jstree");

// node가 select될때 처리될 event를 적어줍니다.​

})

.bind("open_node.jstree", function (event, data) {

console.log("open_node.jstree");

// node가 open 될때 처리될 event를 적어줍니다.​

})

.bind("dblclick.jstree", function (event) {

console.log("dblclick.jstree");

// node가 더블클릭 될때 처리될 event를 적어줍니다.​​

})

.bind("create.jstree", function (e, data) {

console.log("create.jstree");

// node가 create 될때 처리될 event를 적어줍니다.​​

})

.bind("remove.jstree", function (e, data) {

console.log("remove.jstree");

// node가 remove 될때 처리될 event를 적어줍니다.​​

})

.bind("rename.jstree", function (e, data) {

console.log("rename.jstree");

// node가 rename 될때 처리될 event를 적어줍니다.​​

});

});

</script> 

 

 

 

 

## json 데이터정보

_json/depth1.json 

 ​

{

    "data": "전체 브랜드 - (117)",

    "attr": {

        "id": "1",

        "data-type": "1"

    },

    "state": "open",

    "children": [

        {

            "data": "브랜드 A - (45)",

            "attr": {

                "id": "2435",

                "data-type": "2"

            },

            "state": "closed"

        },

        {

            "data": "브랜드 B - (3)",

            "attr": {

                "id": "2337",

                "data-type": "2"

            },

            "state": "closed"

        },

        {

            "data": "브랜드 C - (10)",

            "attr": {

                "id": "2298",

                "data-type": "2"

            },

            "state": "closed"

        },

        {

            "data": "브랜드 D - (59)",

            "attr": {

                "id": "2280",

                "data-type": "2"

            },

            "state": "closed"

        }

    ]

} 

 

 

 

_json/depth2.json​

http://yaguyay.cafe24.com/test/jstree-v.pre1.0/_json/depth2.json​​​

 

 

 

위에 json데이터는 임시로 만들었습니다. 실제 작업시에 서버에서 처리 후 데이터를 json으로 가공해서 return해서 구성했습니다.

 

위에 예제로 만든 트리구조 http://yaguyay.cafe24.com/test/jstree-v.pre1.0/_demo/index.html

 

 

문의내용은 댓글로 달아주시면 아는 선에서 답변드리겠습니다.

[출처] Jstree 사용해서 그룹 트리 만들기|작성자 파란만장 미스터송