고정 헤더 영역
상세 컨텐츠
본문
자바스크립트 tree 컴포넌트는 폴더구조나 조직도 표현등에 많이 사용되는뎅,
찾아보면 이것 저것(jstree,fancy tree, treejs 등등 유료/무료등등) 참 많기도 하당!.
그 중에 jstree 사용법을 알아보장. (왱? 꽤 마니 사용하더랑~~)
jstree홈페이지 에 가보장!
사실 문서가 잘 되어있진 않당.(포인트만 한 것 같은뎅, 너무 포인트만 하고, 버젼도 안 맞아서
상황에 맞는 설정은 실험적 테스트를 해서 알아내야 한당.... ㅠㅠㅠㅠ)
하지만 그리 어렵게 사용하는 케이스는 별로 없으닝, 기본만 알아도 충분하당.
jsTree는 jQuery 플러그인 방식으로 맹글어졌기 때문에 사용하려면 jQuery도 필요하당.
jsTree 홈페이지에 있는 jsTree 버젼은 쪼메 예전꺼당.
cdnjs 에 가서 jstree로 껌색해서 이왕이면 최신버젼으로 가져온당(css도 가져온당)
jsTree 홈페이지에 Overview /Configuration /HTML data /JSON data/Events/ Interaction
탭으로 나누어 사용법을 설명하고 있는 뎅, 개발자에겐 HTML data탭은 필요없당(ajax로 커버)
차분하게 읽어보면, 꽤나 도움이 된당! (나름 뽀인또는 설명하고 있당!)
JSON data탭의 설명의 중요한데, 데이터 타입과 ajax 사용법이 뽀인또당.
데이타타입에 한쪽은 children이 있고, 다른쪽은 대신에 parent가 있음에 주목!
이벤트리스트 와 사용가능 메소드 리스트 를 확인하는 것은 중요하당(외우지 말공 참고하장)
한가지 주의 할 것은 아래그림 처럼 search 메소드를 찾았는뎅, 오른쪽에 search plugin이라
나온다면 search 메소드를 사용하기 위해서는 search 플러그인을 넣어야 된다는 이야기당!
데이터 구조 확인( AJAX로 가져와야 할 데이터 구조)
alldata.json
[
{ "id" : "S1", "parent" : "#", "text" : "SI 사업부", "icon" : "glyphicon glyphicon-home" },
{ "id" : "S2", "parent" : "#", "text" : "솔루션 사업부","alias":"ㅋㅋㅋ" , "icon" : "glyphicon glyphicon-home" },
{ "id" : "S3", "parent" : "#", "text" : "AI 사업부", "icon" : "glyphicon glyphicon-home" },
{ "id" : "S11", "parent" : "S1", "text" : "공공SI" , "icon" : "glyphicon glyphicon-picture"},
{ "id" : "S12", "parent" : "S1", "text" : "일반SI", "icon" : "glyphicon glyphicon-picture" },
{ "id" : "S21", "parent" : "S2", "text" : "그룹웨어" ,"icon" : "glyphicon glyphicon-picture" },
{ "id" : "S22", "parent" : "S2", "text" : "MES" , "icon" : "glyphicon glyphicon-picture"},
{ "id" : "S23", "parent" : "S2", "text" : "ERP", "icon" : "glyphicon glyphicon-picture" },
{ "id" : "S31", "parent" : "S3", "text" : "이미지처리" , "icon" : "glyphicon glyphicon-picture"},
{ "id" : "S32", "parent" : "S3", "text" : "음성처리" , "icon" : "glyphicon glyphicon-picture"},
{ "id" : "S33", "parent" : "S3", "text" : "자연어처리" , "icon" : "glyphicon glyphicon-picture"},
{ "id" : "J01", "parent" : "S11", "text" : "송불곰" , "icon": "glyphicon glyphicon-user" },
{ "id" : "J02", "parent" : "S31", "text" : "강사자" , "icon": "glyphicon glyphicon-user"},
{ "id" : "J03", "parent" : "S22", "text" : "송호랑", "icon": "glyphicon glyphicon-user" },
{ "id" : "J04", "parent" : "S32", "text" : "이늑대" , "icon": "glyphicon glyphicon-user"},
{ "id" : "J05", "parent" : "S33", "text" : "감여우", "icon": "glyphicon glyphicon-user" },
{ "id" : "J06", "parent" : "S12", "text" : "공수달" , "icon": "glyphicon glyphicon-user"},
{ "id" : "J07", "parent" : "S23", "text" : "황악어" , "icon": "glyphicon glyphicon-user"},
{ "id" : "J08", "parent" : "S22", "text" : "홍문어" , "icon": "glyphicon glyphicon-user"}
]parent 속성에 주목: 최상위 node는 #으로 표시되어야 하고,
부모를 가진 자식들은 부모가 누군지 parent 속성에 표시해야 함에 주목
이제 위 데이타를 이용하여, 실제 Tree를 화면에 맹글어 보장.
아래 기본.html이 기본 사용법을 담고 있는뎅, icon 속성에 icon을 넣기 위해성
bootstrap.css도 일부러 가져왔음을 그냥 참고만 하공,
AJAX를 이용해서 데이타 가져온 부분이 중요하닝, 이 부분 사용법에 주목하장
기본.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSTREE 샘플</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/jstree.min.js"></script>
<link rel="stylesheet" href="//static.jstree.com/3.3.15/assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/themes/default/style.min.css" />
</head>
<body>
<div id="jstree"></div>
<input type="text" id="schName" value="">
<button onclick="fSch()">탐색</button>
<script>
//껌색
function fSch() {
console.log("껌색할께영");
$('#jstree').jstree(true).search($("#schName").val());
}
//중요 속성, original, icon, state
// root node는 parent를 #
//Default 설정 바꾸깅, 아래를 주석 처리해보면 모양이 어케 바뀔깡?
$.jstree.defaults.core.themes.variant = "large";
//맹글기, 옵션없이(디폴트 옵션으로, 요렇게는 잘 안씀)
//$("#jstree").jstree(); // creates an instance
//$('#tree2').jstree(true); // get an existing instance (will not create new instance)
//일반적으로 요렇게만 사용해도 충분!
$("#jstree").jstree({
"plugins": ["search"],
'core': {
'data': {
"url": function (node) {
return "alldata.json"; // ajax로 요청할 URL
}
/*,
"data": function (node) {
return { 'id': node.id } // ajax로 보낼 데이터(없어서 주석)
}
*/,
},
"check_callback": true, // 요거이 없으면, create_node 안먹음
}
});
/* 보통은 위 방식으로 충분하지만, 좀더 세밀한 제어를 하고 싶다면,
직접 ajax구현 및 데이터 조작후 callback함수 cb를 이용하여 data세팅
$("#jstree").jstree({
"plugins": ["search"],
'core': {
'data': function (obj, cb) {
console.log("ck1:", obj,this);
let xhr = new XMLHttpRequest();
xhr.open("get", "alldata.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
cb.call(obj, JSON.parse(xhr.responseText));
$('#jstree').jstree(true)
}
}
xhr.send();
},
"check_callback": true // 요거이 없으면, create_node 안먹음
}
});
*/
//이벤트
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// Node 열렸을 땡
let isAdded = false;
$('#jstree').on("open_node.jstree", function (e, data) {
console.log("open되었을땡", data.node);
// 자식 NODE 맹글기, NODE ID S22(MES)가 열렷을 때
// 한번만 김지은 추가하는 예제, 메소드 리스트에서 create_node검색
if (!isAdded && data.node.id == 'S22') {
let myNode = {
"text": "김지은",
"id": "J09",
"whoisshe": "actress",
"isBestFriend": "Y",
"icon": "glyphicon glyphicon-user"
};
let myCallBack = () => {
alert("추가했어용");
}
// NODE 추가
$('#jstree').jstree(true).create_node('S22', myNode, "last", myCallBack);
isAdded = true;
}
});
// Node 선택했을 땡
$('#jstree').on("select_node.jstree", function (e, data) {
console.log("select했을땡", data.node);
});
/* 상호작용, 버젼 호환성을 위해 같은 기능에 3가지 표현이 존재한당. 그냥 우에껄 쓰장!
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
*/
</script>
</body>
</html>검색기능과, Node 추가 기능도 넣었으니, 실행/확인 해 보면 아래처럼 되당.
개인적인 의견은 요기까지가 기본기능이고, 웬만하면 충분할 거라 생각한당!
확장은 이제 당신 몫, 문서를 잘 읽고 거기에 당신의 훌륭한 로직을 추가하랑!
확인해 보길 권장하는 코드
// state 와 original 속성은 꼬옥 확인해 보장
// 강제로 node 선택하게 하는 메소드
$('#jstree').jstree(true).select_node(node.id);
// mulitple일 경우 선택된 모든 node 가져오기
$("#jstree").jstree(true).get_selected("full", true);
//leaf만 찾기(자식 없으면 leaf)
for (node of nodes) {
if (!node.children.length) {
console.log("leaf:",node.id);
}
}
프로그램에서의 오타는 현실세계의 오해에 견줄만하다.
컴파일러가 모르는 오타면 천만다행이당. 수정할 찬스당.
컴파일러와 런타임이 해석할 수 있는 오타라면 이건 오호 NO!!!
현실로 치면 일파 만파가 될 지도 모를 일이다.
시퀀스의 왜곡도 거대시각으로 본다면 오타의 한 종류당.
항상 오타를 경계하장
이왕이면 말과 행동도 경계하장.
당신의 오타가 그....녀 맴속에 오해로 가득 차게 될
텅빈 공간(Blank Space)을 맹글 찬스를 줄 지도 모른당.
그 텅빈 공간을 지우는 법을 난 모른당.
https://www.youtube.com/watch?v=e-ORhEE9VVg
'자바스크립트' 카테고리의 다른 글
| node mongoose (0) | 2023.04.16 |
|---|---|
| 리액트(react) (0) | 2023.02.06 |
| iframe 사이즈 조절 (0) | 2022.10.20 |
| 자바스크립트 기본 문제 (0) | 2022.08.22 |
| audio/video (2) | 2022.08.10 |
