Jstree 사용방법 정리(노드옮기기,노드오픈,노드닫기 등) / 실무활용 예제

jstree 사용방법

(1) jstree 라이브러리를 불러오고, jstree를 그릴 영역에 id값 설정

<script src="/js/jstree.js"></script>

<div class="Listbox mCustomScrollbar" style="height:400px;">

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

</div>

(2) 사용방법

jstree template에 jstree를 그릴 아이디타켓DOM을 설정해주고

Data를 조회해 바인딩하여 사용하면 된다.

-plugins에 jstree 기능들을 추가하여 사용하면 됨.

난 아래 3가지 기능을 주로 사용했다.

search : jstree 데이타 내 검색 가능

dnd : jstree 드래그앤드랍 이동처리

contextmenu : 오른쪽마우스클릭으로 수정,삭제,추가등의 로직처리

var resData = [
    {
        "parent": "#",
        "text": "샘플데이터1"
        ,"data" : {
        	"url" : "/context/url1"
        }
    },
     {
        "parent": "#",
        "text": "샘플데이터2"
        ,"data" : {
        	"url" : "/context/url2"
        }
    },
    {
        "parent": "#",
        "text": "샘플데이터3"
        ,"data" : {
        	"url" : "/context/url3"
        }
    }
]

$tree1 = $('#jstree1');
	$tree1.jstree({
		"json_data" : {
				},
		"plugins" : ["json_data"],
		"core" : {
			"themes" : {
				"icons" : false,
				"dots" : false
			},
			"check_callback" : true,
			"multiple" : false
			,"data" : resData
		},
	}).bind('select_node.jstree', function(evt, data,x ) {
		$(data.event.target).closest('[id=jstree1]').find('li').removeClass('on');
		$(data.event.target).closest('li').addClass("on");
		data.instance.toggle_node(data.node);
		var obj = data.node.data;
		if(obj){
			// jstree 노드 선택시 로직처리
		}
	}).bind('loaded.jstree', function(evt, data) {
	}).bind('create_node.jstree', function(evt, data) {
	}).bind('delete_node.jstree', function(evt, data) {
	}).bind('rename_node.jstree', function(evt, data) {
	}).bind('edit_node.jstree', function(evt, data) {
	}).bind('move_node.jstree', function(evt, data) {
	}).bind('open_node.jstree', function(evt, data) {
	})
	$(document).bind('dnd_stop.vakata', function(evt, data) {
	}).bind('dnd_start.vakata', function(evt, data) {
	}) }
		})
	}
	,openAll : function(){
		$tree1.jstree("open_all");  //tree 모두 열기
	}
	,closeAll : function(){
		$tree1.jstree("close_all"); //tree 모두 닫기
	}
	,add : function(){
	}                        

(3) 실제 실무활용예

하나하나 설명해서 정리하고 싶지만..실업무상 그러기가 쉽지않은.

move_node와 contextmenu 정도를 많이 찾아다가 구현했었다.

  var $tree=$('#jstree');
  $tree.jstree({
    "plugins" : [ "json_data","types","search","dnd"],  //"contextmenu"
    "themes" : {
      "theme" : ["default"]
    },
    "search" : {
      "case_insensitive" : true,
      "show_only_matches" : true,
      "search_callback" : function(key,node){
        
        if(node.original){
          
          _this.g_i++;
          if(node.text.indexOf(key)>=0){ //내가검색한 키워드와 일치하는 항목이 있다면 
            searchArray.push(node);
            if(false){  // node.parent == "#"
              searchArray.push(node);
            }else{ 
              //return true;
            }
          }
          
          if(_this.g_i == _this.dataLen){
            _this.openSearch1Depth();
          }
          
        }else{
          ;
        }
        
      }
          
    },
    "core" : {
      "themes" : {
        "icons" : false,
        "dots" : false
      },
      "check_callback" : true,
      "multiple" : false
      ,"data" : data.items //jstree에 Data 주입
    },
    //2depth 까지만 움직일 수 있음.
    "types" : {         
      "valid_children" : [ "default" ],
      "default" : {
        "max_depth" : 1
        //"max_children" : 1
      }
    }
    ,
    "contextmenu" : {
      "items" : function($node){
        var tree = $('#jstree').jstree(true);
        
        if( o_array[_this.selectedBrd_Id].PARENT_BOARD_CODE == "#"){
          /*1Depth게시판 옵션*/
          return {
            "Rename" : {
              "separator_before" : false,
              "seperator-after" : false,
              "label" : "수정",
              "action" : function(obj){
                tree.edit($node);
              }
            }
            ,"Remove" : {
              "separator_before" : false,
              "seperator-after" : false,
              "label" : "삭제",
              "action" : function(obj,node){

                _this.selectBrdObj = $node;
                _this.selectedBrd_Id = $node.id;
                _this.deleteBoard();
                
              }
            }
            ,"Create" : {
               "separator_before" : false,
                "separator_after"  : true,
                "label"            : "생성",
                "action"           : function (obj,node) {
                 
                  var parentId = $("#jstree").jstree().get_node( $node ).id;
                  //8자리랜덤코드..
                  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                  var stringLen = 8;
                  var randomStr = '';
                  for(var i=0; ia").addClass('jstree-clicked');
   
    
  }).bind('edit_node.jstree', function(evt, data) {
  
  //dnd 후 부모오픈
  }).bind('move_node.jstree', function(evt, data) {
    
    //부모가 되었을때
    if(data.parent == "#"){
      //1depth순서정렬
      $.each($("#jstree>ul>li"),function(i, item){
        o_array[$(item).attr('id')].BOARD_ORD = (i+1);
        o_array[$(item).attr('id')].PARENT_BOARD_CODE = "#";
        o_array[$(item).attr('id')].BRD_MODE = ( o_array[$(item).attr('id')].BRD_MODE =='C' ? 'C' : 'U' );
      });
    
    //자식이 되었을때
    }else{
      //2depth정렬
      $tree.jstree("open_node", data.parent);
      
      $.each( $("#"+data.parent+">ul>li") ,function(i, item){
        o_array[$(item).attr('id')].BOARD_ORD = (i+1);
        o_array[$(item).attr('id')].PARENT_BOARD_CODE =  o_array[data.parent].id ;
        o_array[$(item).attr('id')].BRD_MODE = ( o_array[$(item).attr('id')].BRD_MODE =='C' ? 'C' : 'U' );
        if(o_array[data.parent].USE_YN=="N"){
            o_array[$(item).attr('id')].USE_YN = "N";
        }
      });
    }
    
  }).bind('open_node.jstree', function(evt, data) {
    
  });
  
  
  //jstree 노드 생성 후, 수정모드로 바로 변경
  $tree.jstree("create_node", "#", data, "last", function(new_node) {
    $tree.jstree("open_node", $tree.jstree("get_selected"));
    var inst = $.jstree.reference(new_node);
    inst.edit(new_node);
  });