[JavaScript] jsTree plugin으로 TreeView 구현

[JavaScript] jsTree plugin으로 TreeView 구현

---

jsTree란?

- jsTree is jquery plugin, that provides interactive trees. 

It is absolutely free, open source and distributed under the MIT license. 

jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

 

포스팅할 순서

• 1) jsTree 생성 방법
• 2) 모든 Node가 펼쳐진 상태로 Load하는 방법
• 3) Drag & Drop (move_node) 이벤트 Drop 되는 시점에 조건 추가
• 4) ContextMenu 우클릭 옵션 숨기기 (jstree.js 파일 수정)
• 5) DB 반영 이후 treeView 새로고침

---

1) jsTree 생성 방법

// script
$('#testTree').jstree({
	'core' : { "check_callback" :  true },
	'data' : treeList,
	'plugins' : ["dnd","contextmenu"]
})

// 해당 treeView가 그려질 부분
<div id="testTree"></div>

-> cdn 추가, min file 다운로드와 같은 기본적인 내용은 jsTree 홈페이지에 자세히 기술되어 있다. 

추가적으로 jsTree 홈페이지에서 자신이 원하는 기능을 plugin tab에서 찾아 활용할 수 있다.

 

참고: www.jstree.com/

jstree

---

2) 모든 Node가 펼쳐진 상태로 Load하는 방법

$('#testTree').jstree({
	'core' : { "check_callback" :  true },
	'data' : treeList,
	'plugins' : ["dnd","contextmenu"]
}).on("loaded.jstree",function(e,data){
	$('#testTree').jstree('open_all');
});

-> 해당 부분이 Load되는 시점에 jsTree option에 open_all을 추가하면 모든 Node들이 open된 상태로 Load된다.

---

3) Drag & Drop (move_node) 이벤트 Drop 되는 시점에 조건 추가

-> 해당 노드가 Drop event가 발생되는 시점에 조건을 추가하고 싶을 경우 사용할 수 있는 방법이다.

false값이 return되면 drop event가 취소된다.

$('#testTree').jstree({
	'core' : {
		"check_callback" : function (op, node, par, pos, more) {
			if (op === "move_node" && more.ref === undefined) {
				return false;
			}
			return true;
		},
		'data' : treeList
	},
	'plugins' : ["dnd","contextmenu"]	
});

 

* op, node, par, pos, more의 의미

• op(operation): 동작상태 (e.g. create_node, rename_node, delete_node, move_node, edit, copy_node 등
• node: 선택된 노드 정보
• par(parent): 선택된 노드의 부모 정보(move_node의 경우 drop된 위치의 부모 정보
• pos(position): drop된 위치정보
• more: 기타정보

 

 

-> Drop event가 반영된 이후 값을 server에 반영하고 싶은 경우라면 아래 코드를 참고

$('#testTree').jstree({
	'core' : {
		"check_callback" : function (op, node, par, pos, more) {
			if (op === "move_node" && more.ref === undefined) {
				return false;
			}
			return true;
		},
		'data' : treeList
	},
	'plugins' : ["dnd","contextmenu"]	
}).on("move_node.jstree",function(e,data){
	$.ajax({
    	type : "POST",
        url : currentHostPath + '요청주소',
        data : {
			// 반영할 data        
    	},
   		success : function(data) {
			console.log(data);
		},
		error : function(data) {
			console.log("fail");
		}
	});
});

---

4) ContextMenu 우클릭 옵션 숨기기 (jstree.js 파일 수정)

-> 기본적으로 jsTree의 contextmenu plugin이 제공하는 method는 왼쪽 사진과 같다.

제공되는 여러 method 중, 원하는 method만 선택하여 사용하고 싶을때는 download받은 jstree.js파일을 수정함으로써 가능하다. 

 

items : function (o, cb) { // Could be an object directly
         return {
            "create" : {
               "separator_before"   : false,
               "separator_after"   : true,
               "_disabled"         : false, //(this.check("create_node", data.reference, {}, "last")),
               "label"            : "Create",
               "action"         : function (data) {
                  var inst = $.jstree.reference(data.reference),
                     obj = inst.get_node(data.reference);
                  inst.create_node(obj, {}, "last", function (new_node) {
                     try {
                        inst.edit(new_node);
                     } catch (ex) {
                        setTimeout(function () { inst.edit(new_node); },0);
                     }
                  });
               }
            },
            "rename" : {
               "separator_before"   : false,
               "separator_after"   : false,
               "_disabled"         : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
               "label"            : "Rename",
               /*!
               "shortcut"         : 113,
               "shortcut_label"   : 'F2',
               "icon"            : "glyphicon glyphicon-leaf",
               */
               "action"         : function (data) {
                  var inst = $.jstree.reference(data.reference),
                     obj = inst.get_node(data.reference);
                  inst.edit(obj);
               }
            },
            "remove" : {
               "separator_before"   : false,
               "icon"            : false,
               "separator_after"   : false,
               "_disabled"         : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
               "label"            : "Delete",
               "action"         : function (data) {
                  var inst = $.jstree.reference(data.reference),
                     obj = inst.get_node(data.reference);
                  if(inst.is_selected(obj)) {
                     inst.delete_node(inst.get_selected());
                  }
                  else {
                     inst.delete_node(obj);
                  }
               }
            },
/*            "ccp" : {
               "separator_before"   : true,
               "icon"            : false,
               "separator_after"   : false,
               "label"            : "Edit",
               "action"         : false,
               "submenu" : {
                  "cut" : {
                     "separator_before"   : false,
                     "separator_after"   : false,
                     "label"            : "Cut",
                     "action"         : function (data) {
                        var inst = $.jstree.reference(data.reference),
                           obj = inst.get_node(data.reference);
                        if(inst.is_selected(obj)) {
                           inst.cut(inst.get_top_selected());
                        }
                        else {
                           inst.cut(obj);
                        }
                     }
                  },
                  "copy" : {
                     "separator_before"   : false,
                     "icon"            : false,
                     "separator_after"   : false,
                     "label"            : "Copy",
                     "action"         : function (data) {
                        var inst = $.jstree.reference(data.reference),
                           obj = inst.get_node(data.reference);
                        if(inst.is_selected(obj)) {
                           inst.copy(inst.get_top_selected());
                        }
                        else {
                           inst.copy(obj);
                        }
                     }
                  },
                  "paste" : {
                     "separator_before"   : false,
                     "icon"            : false,
                     "_disabled"         : function (data) {
                        return !$.jstree.reference(data.reference).can_paste();
                     },
                     "separator_after"   : false,
                     "label"            : "Paste",
                     "action"         : function (data) {
                        var inst = $.jstree.reference(data.reference),
                           obj = inst.get_node(data.reference);
                        inst.paste(obj);
                     }
                  }
               }
            }*/
       };
  }

-> jstree.js파일에서 해당 부분을 검색하여 불필요한 부분을 주석처리 하거나 삭제한 후 tree로 돌아가면 오른쪽 사진과 같이 해당 method가 삭제된 상태로 보여지는 것을 확인할 수 있다.

---

5) DB 반영 이후 treeView 새로고침

success : function(data) {
	$('#testTree').jstree(true).settings.core.data = data;
	$('#testTree').jstree(true).refresh();					
},