js

ํŠธ๋ฆฌ๊ตฌ์กฐ jsTree ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

natrue 2023. 12. 7. 17:42
728x90

jstree :  jQuery ๊ธฐ๋ฐ˜์œผ๋กœ ํŠธ๋ฆฌํ˜•์‹์˜ ๊ตฌ์กฐ๋ฅผ ์ง€์›ํ•ด ์›น์— ์ถœ๋ ฅ์„ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

 

jstree, jquery ์Šคํฌ๋ฆฝํŠธ ๋ฐ css 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

 

์ž์„ธํ•œ ์ •๋ณด๋Š” ์†Œ์Šค ์ฃผ์„ ์ฐธ๊ณ 

 

 

1. node๊ฐ€ loaded ๋˜์—ˆ์„๋•Œ ์‹คํ–‰ - $('#jstree').on('loaded.jstree', function (e, data) { });

2. node๊ฐ€ change ๋˜์—ˆ์„๋•Œ ์‹คํ–‰ - $('#jstree').on('changed.jstree', function (e, data) { });

3. node๊ฐ€ select ๋˜์—ˆ์„๋•Œ ์‹คํ–‰ - $('#jstree').on('select_node.jstree', function (e, data) { });

 

๋ชจ๋“  node ์—ด๊ธฐ : $('#jstree').jstree('open_all');

select_node : ํŠน์ • ๋…ธ๋“œ ์„ ํƒํ•˜๊ธฐ - $('#jstree').jstree(true).select_node('ํŠน์ • id');

create_node : ํŠน์ • ๋…ธ๋“œ ์ถ”๊ฐ€ํ•˜๊ธฐ - $('#jstree').jstree(true).create_node... 

delete_node : ํŠน์ • ๋…ธ๋“œ ์‚ญ์ œํ•˜๊ธฐ - $('#jstree').jstree(true).delete_node('ํŠน์ • id');

 

<!DOCTYPE html>
<html lang="ko">
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- jsTree theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<style>
button {
  /* ์ƒ๋žต */
  margin: 0;
  padding: 0.5rem 1rem;

  font-family: "Noto Sans KR", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;

  display: inline-block;
  width: auto;

  border: none;
  border-radius: 4px;
}

#event_result{
  font-size: 1rem;
  font-weight: 400;
  padding: 0.5rem 1rem;
}
</style>
</head>
<body>
<div id="jstree"></div>
<div id="event_result"></div>
<button id="clickBtn">click event</button>
<button id="btnCreate">create node</button>
<button id='btnDelete'>delete node</button>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- jsTree -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>

$(function() {
  // ํ…Œ์ŠคํŠธ ๊ฒธ json data ์ƒ์„ฑ. ์ถ”ํ›„ ajax๋กœ ๋ณ€๊ฒฝ ํ•  ์˜ˆ์ •
  // parent : ์ƒ์œ„ node์˜ ์•„์ด๋””๋ฅผ ์ง€์ •ํ•˜์—ฌ ๋ถ€๋ชจ ๊ด€๊ณ„๋ฅผ์ •ํ•จ. parent๊ฐ€ '#'์ธ ๊ฒฝ์šฐ๋Š” ์ตœ์ƒ์œ„ ๋ ˆ๋ฒจ์˜ ๋…ธ๋“œ๋ฅผ ๋‚˜ํƒ€๋ƒ„.
  // id     : node์˜ id๋ฅผ ์ง€์ •
  // text   : node์˜ ์ด๋ฆ„์„ ์ง€์ •
  	var data = [
			    { "id" : "p1", "parent" : "#", "text" : "Parent-1" },
				{ "id" : "p2", "parent" : "#", "text" : "Parent-2" },
				{ "id" : "p3", "parent" : "#", "text" : "Parent-3" },
				{ "id" : "c1", "parent" : "p1", "text" : "Child-1" },
				{ "id" : "c2", "parent" : "p1", "text" : "Child-2" },
				{ "id" : "c3", "parent" : "p1", "text" : "Child-3" },
				{ "id" : "c4", "parent" : "p2", "text" : "Child-4" },
				{ "id" : "c5", "parent" : "p2", "text" : "Child-5" },
				{ "id" : "c6", "parent" : "p3", "text" : "Child-6" },
				{ "id" : "g1", "parent" : "c6", "text" : "Grand-1" },
				{ "id" : "g2", "parent" : "c6", "text" : "Grand-2" },
			];
 
// [ajax ๊ตฌํ˜„์ผ๊ฒฝ์šฐ]
// 	  $('#jstree').jstree({
// 	    'core': {
// 	      'data': {
// 	       'url': '/url',
// 	        'dataType': 'json'
// 	      }
// 	    }
// 	  });
  
    // ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑ
	// jstree์˜ node ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
	$('#jstree').jstree({
	  "core": {
	    "check_callback": true,
	    "data": data
	  },
	}).on('create_node.jstree', function(e, data) {
		console.log('saved');
	});

    
    // ์ด๋ฒคํŠธ๋ฅผ ์„ค์ •
	// btnCreate ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ 
	$('#btnCreate').click(function() {
	 	console.log("btnCreate");
	 	
		// ๋ถ€๋ชจ ์ž„์˜ ์ƒ์„ฑ ํ…Œ์ŠคํŠธ parent๋Š” #์ž„
		$('#jstree').jstree(true).create_node('#', {"id": "p4", "text": "Parent-4"}, "last", function() {
		  console.log('Parent Created');
		});
	
		//์ž์‹ ์ž„์˜ ์ƒ์„ฑ ํ…Œ์ŠคํŠธ create_node('์ƒ์„ฑํ•  ๋…ธ๋“œ์˜ ๋ถ€๋ชจ ๋…ธ๋“œ', {์ƒ์„ฑํ•  ๋…ธ๋“œ์˜ ์ •๋ณด}, ์ˆœ์„œ)
		$('#jstree').jstree(true).create_node('p3', {"id": "c7", "text": "Child 7"}, "last", function() {
		  console.log('Child Created');
		});
	});

	$('#btnDelete').click(function() {
		console.log('btnDelete');
		// ์œ„์—์„œ ์ž„์‹œ ์ƒ์„ฑํ•œ ๋ถ€๋ชจ p4 ์‚ญ์ œ
		$('#jstree').jstree(true).delete_node('p4');
	});
	 
	// node loaded ๋˜์—ˆ์„๋•Œ ํ•จ์ˆ˜ 
	$('#jstree').on('loaded.jstree', function (e, data) {
		console.log('loaded.jstree');
	  
		// loaded ๋˜์—ˆ์„๋•Œ ๋ชจ๋“  node ์—ด๊ธฐ 
		//$('#jstree').jstree("open_all");
		
		// loaded ๋˜์—ˆ์„๋•Œ ํŠน์ •ํ•œ node ์—ด๊ธฐ 
		$('#jstree').jstree('open_node', 'p1');
	});

	// node๊ฐ€ change ๋˜์—ˆ์„๋•Œ ํ•จ์ˆ˜
	$('#jstree').on('changed.jstree', function (e, data) {
	  console.log(data.selected);
	    
	    var i,j,r = [];
	    for(i = 0, j = data.selected.length; i < j; i++) {
	      r.push(data.instance.get_node(data.selected[i]).text);
	    }
	    // div์— ํ˜„์žฌ ์„ ํƒ ๋œ ๊ฐ’์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•จ.
	    $('#event_result').html("* [ selected ] : " + r.join(', '));
	
	  });
	
	// node select ๋˜์—ˆ์„๋•Œ ํ•จ์ˆ˜  
	$('#jstree').on('select_node.jstree', function (e, data) {
	  	console.log("select.jstree");
	});
	
	// clickBtn ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ 
	$('#clickBtn').on('click',function(){
	    console.log('clickBtn click');
	    
		// clickBtn ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ํŠน์ • node ์„ ํƒ๋˜๊ฒŒ 
		$('#jstree').jstree(true).select_node('c5'); // ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ํŠน์ • ๋…ธ๋“œ ์„ ํƒ๋˜๊ฒŒ (id๋กœ)
	});
});

</script>
</body>
</html>

 

 

 

 

์ฐธ๊ณ  : https://www.jstree.com/

์ฐธ๊ณ  : https://github.com/vakata/jstree/blob/master/demo/basic/index.html

์ฐธ๊ณ  : https://www.incodom.kr/jsTree

์ €์ž‘์žํ‘œ์‹œ

'js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[JavaScript] file drag and drop  (0) 2023.12.11
for in ๋ฌธ ์‚ฌ์šฉ ์‹œ ์ฃผ์˜ํ•  ์   (2) 2023.12.08
<optgroup> select box ๊ทธ๋ฃนํ™”  (2) 2023.12.05
[jQuery] $.isNumeric() ์ˆซ์ž ํ™•์ธ ํ•จ์ˆ˜  (0) 2022.04.29
[JavaScript] ์™ผ์ชฝ 0 ์ œ๊ฑฐํ•˜๋Š” ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•  (0) 2022.04.13

'js'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€ํŠธ๋ฆฌ๊ตฌ์กฐ jsTree ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”