336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
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){ }
});
'Web > jQuery' 카테고리의 다른 글
Jstree 사용방법 정리(노드옮기기,노드오픈,노드닫기 등) / 실무활용 예제 (0) | 2019.01.24 |
---|---|
jQuery Datepicker 플러그인 사용예제 (달력이미지추가) (0) | 2019.01.23 |
$.getJSON 으로 JSON DATA 읽어오기 (0) | 2016.11.04 |
[jQuery] form 객체 json 변환/ serializeArray() (0) | 2016.09.20 |
[jQuery] AJAX 참고_정리내용 (0) | 2016.09.06 |