jstree 사용방법 / 핸들링 방법 모음!! ( 특정노드선택, 부모노드 아이디찾기, 특정노드열기, 노드선택해제 등등)

jstree를 사용해서 개발했던 여러 화면에서 기능들을 좀 정리해보았다.

따라서 id값이 좀 중구난방인데 사용방법에 대해서 참고하면 좋을듯.

jstree 처음 사용할때 워낙 애먹었던 기억이 있었고

자주 사용하는 기능에 대해 전체적으로 정리되어 있던 포스팅은

보지 못했던것 같아서 ^^

jstree를 공부하고 계시는 개발자분들에게 도움이 되었으면 한다.

(1) jstree 전체객체 참조 (여러방법이 있음)

var _model = $("#jstree").jstree(true)._model.data;
	$.each(_model, function(_idx, _idata){
              console.log( _idata.id);
              console.log( $("#"+_idata.id) );
	}
});
var obj = $('#jstree').jstree(true).get_json('#', {flat:true});
var model = $("#allMenuTree").jstree(true)._model.data;
	$.each(model, function(idx, idata){
	    console.log( idata.original );
});

(2) jstree 전체 닫기 / 열기

$("#jstree").jstree("close_all");
$("#jstree").jstree("open_all");

(3) jstree내 검색

$("#jstree").jstree("search", searchString);

(4) jstree 아이디 검색

var parentId = $("#jstree").jstree().get_node( $node ).id;

(5) jstree노드 생성(context메뉴의 생성 사용안하고 별도의 버튼등으로 노드생성시)

 $tree.jstree("create_node", parentId, data, "last", function(new_node) {
		$tree.jstree("open_node", $tree.jstree("get_selected"));
		var inst = $.jstree.reference(new_node);
		inst.edit(new_node);
  });

(6) 가장 첫노드 정보 가져오기

var firstNode = $("#jstree").jstree().element.context.firstChild;
var firstNodeChildLen =  $("#jstree").jstree().element.context.firstChild.childElementCount;

(7) 노드 선택된것처럼 표현

firstNode.find("a").attr('aria-selected',true);
firstNode.find("a").addClass('jstree-clicked');

(8) 노드선택 해제

$tree.jstree("deselect_all");

(9) 특정노드 열기

$tree.jstree("open_node", nodeId);

(10) 선택한 노드의 부모노드/자식노드 찾기

var parent =  ( $("#jstree").jstree(true).get_node( _this.selectedBrd_Id ) ).parent;
var children = $("#jstree").jstree().get_node(  parentCode ).children;

(11) jstree에서 삭제

$("#jstree").jstree().delete_node( $("#"+ nodeId) );

(12) 특정노드값 자동선택되게(클릭된것처럼)

$tree.jstree("toggle_node", nodeId);

(13) jstree 선택된 노드갯수 구하기

var selectedNodeLen = ( $tree2.jstree("get_selected") ).length;
$.each( $tree2.jstree("get_selected") ,function(i,item){
   var tObj = $("#jstree2").jstree(true).get_node( item );
});

(14) 특정노드 객체 가져오기

$('#jstree2').jstree(true).get_json(nodeId, {flat:true});
$("#setAddMenu").jstree("get_node", node_id);

(15) 특정노드의 text값 가져오기

$("#allMenuTree").jstree(true).get_node(nodeId).text

(16) jstree 노드 hidden 상태 체크 .state.hidden으로 알 수 있다.

var obj = $("#allMenuTree").jstree(true)._model.data;
$.each(obj[parent].children, function(i, key){
   var item = obj[key];
   $.each(item.children, function(_i, _key){
	if( $("#allMenuTree").jstree("get_node", _key).state.hidden){ }
});