본문 바로가기
Library & Framework/jsTree

[jsTree] jstree 유용한 함수모음

by 썸머워즈 2020. 12. 15.
반응형

jstree 사용할 때 마다 계속 찾아서 쓰기 귀찮아서 지금까지 사용한것들 정리한것이다.

(사실 더 나은 방법이 있을수 있다 그냥 썼던거 옮겨놓은거라...)


var jstreeExtend = {};

/**
* jstree 제어
* elem : jstree dom 객체
*/
jstreeExtend.jstree = function(elem){

//jstree 객체
$tree = elem;

// jstree 생성
//$tree.jstree({
//  //core 제어
//  'core' : {
//      'data' : data,
//      "check_callback" : true // plugins 'dnd'와 같이 사용 이동하고싶을때
//  },
//  "plugins" : ["dnd","types"],
//  "types" : {
//    "valid_children" : [ "default" ],
//    "default" : {
//      "max_depth" : 2 // 하위 depth 제한
//    }
//  }
//});

// 트리 구조 로딩 완료 시
$tree.bind("loaded.jstree", function(e) {
	//...
}.bind(this));

// 트리 구조 새로고침 시
$tree.bind("refresh.jstree", function(e,d) {
	//...
}.bind(this));

/**
* 해당 ID 값의 데이터를 리턴
*  id : node.id
* */ 
this.findCoreData = function(id) {
	var coreData = $tree.jstree(true).settings.core.data;
	for (var i=0; i<coreData.length; i++) {
		var data = coreData[i];
		if (data.id == id) {
			return data;
		}
	}
	return null;
};

/**
* root node get
* */ 
this.getRootNode = function() {
	return $tree.jstree(true).get_node('#');
};

/**
* 노드의 원시 데이터 set
* data : arry
* */ 
this.setCoreData = function(data) {
	$tree.jstree(true).settings.core.data = data;
};

/**
* 노드의 원시 데이터 get
* */ 
this.getCoreData = function() {
	return $tree.jstree(true).settings.core.data;
};

/**
* 현재 트리구조 + 원본 데이터를 Merge 하여 데이터를 리턴
* */ 
this.getData = function() {
	var newData = [];
	var jdata = $tree.jstree(true).get_json("#", {flat:true});
	for (var i=0; i<jdata.length; i++) {
		var current = jdata[i];
		var id = current.id;
		var data = this.findCoreData(id);
		if (data) {
//        current.text = $("<div>"+current.text+"</div>").text();
			newData.push($.extend(data, current));
		}
	}
	return newData; 
};

/**
* 새로고침
* */
this.refresh = function() {
	$tree.jstree(true).refresh();
}

/**
* 데이터 추가
* d : obj
* */
this.addData = function(d){
	var data = this.getData();
    data.splice(data.length,0,d);
	this.setCoreData(data);
	this.refresh(data);
}

/**
* 노드 이름 수정 폼
*  id
* */ 
this.edit = function(id) {
	$tree.jstree(true).edit(id);
};

/**
* 노드 가져오기
*  id
* */ 
this.getNode = function(id) {
	return $tree.jstree(true).get_node(id);
};

/**
* 자식노드 가져오기
*  id
* */ 
this.childrenNode = function(id) {
	var ids = this.getNode(id).children;
	if(!ids) return [];

	var children = [];
	for (var i=0; i<ids.length; i++) {
		children.push(this.getNode(ids[i]));
	}
	return children;
};

/**
* 부모노드 가져오기
*  id
* */ 
this.parentNode = function(id) {
	return this.getNode(this.getNode(id).parent);
};

/**
* 전체열기
* */ 
this.openAll = function() {
	$tree.jstree("open_all");
};

/**
* 전체 닫기
* */ 
this.closeAll = function() {
	$tree.jstree("close_all");
};

/**
* 특정 노드 열기
*  id
* */ 
this.openNode = function(id) {
	$tree.jstree("open_node", id)
};

/**
* 특정 노드 닫기
*  id
* */ 
this.closeNode = function(id) {
	$tree.jstree("close_node", id)
};

/**
* 특정노드 삭제
*  id
* */ 
this.removeNode = function(id) {
	$tree.jstree(true).delete_node(id);
};

/**
* 특정노드 이름변경
* node : 변경할 대상 node
* text : 변경할 이름 string
* */ 
this.renameNode = function(node, text) {
	$tree.jstree("rename_node", node, text);
};
}

추후 필요에 따라 계속 업데이트 예정

반응형


댓글

TOP