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 사용해서 그룹 트리 만들기|작성자 파란만장 미스터송