728x90
JSTREE 간단 사용법
자바스크립트 tree 컴포넌트는 폴더구조나 조직도 표현등에 많이 사용되는뎅, 찾아보면 이것 저것(jstree,fancy tree, treejs 등등 유료/무료등등) 참 많당. 그 중에 jstree 사용법을 알아보장. (왱? 꽤 마
e-7-e.tistory.com
참고하자
JSTREE는 Jquery로 만들어져 무조건 Jquery가 있어야함
jstree.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>수지 Tree</title>
<!-- css 포함 -->
<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" integrity="sha512-A5OJVuNqxRragmJeYTW19bnw9M2WyxoshScX/rGTgZYj5hRXuqwZ+1AVn2d6wYTZPzPXxDeAGlae0XwTQdXjQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- jQuery plugin으로 만들어졌으니 jquery 필수 포함 (페이지당 1번만 포함시키면 됨. 여러번 넣으면 깨짐) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- jstree lib 포함 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/jstree.min.js" integrity="sha512-zTdDEt8tOqDRVRFKgypzg8g7FJE7A9lhnTZ6YpUlufaF/XvjIGF/zaPljDhER8XmIwePEAjBjv27TEuubED0/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- 요거이 따악 기본!, 추가적인 검색과 문서읽기 능력을 키워서 해보기-->
<!-- jsTree를 넣을 위치를 잡아 줌! -->
<div id="sujiTree"></div>
<input type="text" id="schText" value="">
<button onclick="fSch()">찾아볼까낭</button> <!--검색기능-->
<script>
//찾기!
function fSch() {
// true가 있으면 만들어진 걸 가져오고, 없으면 새로 만든다고 되어있는데,
// 설명이 쪼금 부족!
$('#sujiTree').jstree(true).search($("#schText").val());
}
console.log("찍어보장1",$.jstree.defaults.core.themes.variant); // 디폴드값 : false
// 디폴트값 강제 설정법!, 리스트는 나중에 찾기로
$.jstree.defaults.core.themes.variant = "large";
console.log("찍어보장2",$.jstree.defaults.core.themes.variant);
// $('#sujiTree').jstree(); // Tree 컴포넌트 생성 //$(function()은 이벤트라서 필요할 때만 넣으면 됨.
/*
$('#sujiTree').jstree({
'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
}
}); // Tree 컴포넌트 생성 //$(function()은 이벤트라서 필요할 때만 넣으면 됨.
*/
//AJAX 사용!(요게 중요!)
/* 보통은 이걸로 충분!*/
$('#sujiTree').jstree({
"plugins" : [ "search" ], //search시 search 플러그인 추가 (이거 직접 추가 안하면 search 못함)
'core' : {
'data' : {
'url' : function (node) {
return "alldata.json" //controller URL만 적어주면 됨!
}
},
check_callback: true // 주의) 요거이 없으면, create_node 안먹음
}
});
/*
위에꺼는 URL과 보내는 data만 쓸 수 있어서, 세세한 제어가
불가능한데, 그런 경우 아래처럼 직접 ajax를 넣어서 제어한당!
$('#sujiTree').jstree({
'core' : {
'data' : function (obj, cb) {
let xhr = new XMLHttpRequest();
xhr.open("get","alldata.json",true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb.call(this,JSON.parse(xhr.responseText));
}
}
// Loading 메세지가 계속 나오는 건 보통 data가 없는 경우 (데이터 전송 잘하기!!)
xhr.send();
}
}});
*/
/*
$('#tree').jstree({
'core' : {
'data' : function (obj, cb) {
cb.call(this,['Root 1', 'Root 2']);
//cb.call(this,배열데이터);
}
}});
*/
/*
//이벤트 등록법
$('#sujiTree').on("changed.jstree", function (e, data) {
//console.log("체킁:",data); node에 필요한 정보가 없는 경우에 사용
console.log("실제로 많이 쓰는 건 node정보:",data.node);
console.log("실제로 많이 쓰는 건 node정보:",data.node.original);
});
*/
// node open 이벤트(폴더 열때 이벤트 발생) (이벤트명은 문서에서 검색해서 복사 붙여넣기)
// 상태변수, 요런걸 초보자들이 잘 못해용! // 변수 아끼지 말고 막 선언하자!!!
let isAdded = false; // (전역변수로 설정) 초기값 false, 아직 안 추가 되었다는 의미!
$('#sujiTree').on("open_node.jstree", function (e, data) {
console.log("열린노드:", data.node );
if(!isAdded && data.node.id == 'S4'){ //앞에꺼가 false 면 뒤의꺼 검사도 안함.
alert("왔냥???");
// child node 강제로 만들기 (닫고 열때마다 계속 추가)
$("#sujiTree").jstree(true).create_node("S4",
{"text":"대전스타일","id":"S42"},
'last', function() {
alert("추가 되었을거예용");
}
);
isAdded = true; // 추가 되었음!
}
});
//node 선택 이벤트 (선택(클릭)할때 이벤트 발생)
$('#sujiTree').on("select_node.jstree", function (e, data) {
console.log("선택한노드:", 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>
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" : "S4", "parent" : "#", "text" : "AI 패션 사업부","icon":"glyphicon glyphicon-home" },
{ "id" : "S41", "parent" : "S4", "text" : "강남 스타일" },
{ "id" : "S11", "parent" : "S1", "text" : "공공SI"},
{ "id" : "S12", "parent" : "S1", "text" : "일반SI" },
{ "id" : "S21", "parent" : "S2", "text" : "그룹웨어" },
{ "id" : "S22", "parent" : "S2", "text" : "MES" },
{ "id" : "S23", "parent" : "S2", "text" : "ERP" },
{ "id" : "S31", "parent" : "S3", "text" : "이미지처리" },
{ "id" : "S32", "parent" : "S3", "text" : "음성처리" },
{ "id" : "S33", "parent" : "S3", "text" : "자연어처리" },
{ "id" : "S231", "parent" : "S23", "text" : "김수지" },
{ "id" : "S221", "parent" : "S21", "text" : "임민우" },
{ "id" : "S411", "parent" : "S41", "text" : "김채현", "hansome":"아닝", "icon":"glyphicon glyphicon-user" }
]
'Spring > Spring 기초' 카테고리의 다른 글
| 최프 pom.xml 및 설정파일들.. (0) | 2023.09.04 |
|---|---|
| e7e샘의 chart.JS (0) | 2023.09.04 |
| e7e샘의 스케줄러 설정 (0) | 2023.09.01 |
| filezila사용해서 file전송 업로드/다운로드 해보깅 (0) | 2023.09.01 |
| filezila사용해서 file전송 서버 만들기(ftp) (0) | 2023.09.01 |
