jsTree 는 MIT 에서 공개한 jquery plugin 으로 HTML 또는 JSON 데이터를 Tree 형식으로 화면에 출력해주는 라이브러리이다.
https://www.jstree.com/ 에서 jquery plugin 설명을 참조한다.
여기서 다루는 jstree.js 는 include 해보니 jstree.min.js 와 약간 다른지 tree 아이콘 모양이 달라서 jstree.min.js 를 사용했다.
본 자료는 구글링을 통해서 얻은 지식으로 기존 자료에 부족한 사항을 추가했다.
기본적인 설명은 http://phpflow.com/php/dynamic-tree-with-jstree-php-and-mysql/ 사이트에 잘 나와있다.
관리자가 메뉴를 추가/수정/삭제하는 기능도 이 사이트에 잘 나와 있다.
다만 아쉬웠던 것은 Treeview 에서 아이템을 클릭하면 해당 ITEM에 연결된 link 를 다른 <div>에 뿌려주는 것이 되어야 Treeview 의 의미가 있으므로 이 부분 처리를 하려고 열심히 검색하고 찾았는데 ....
포기하고 생각을 변경하여 시도를 한 끝에 원하는 결과를 얻었다.
이 과정에서 고수의 도움을 받았는데 알고 보면 생각의 전환만 했어도 쉽게 해결할 수 있었던 사항이다.
=== 테이블 구조 ===
CREATE TABLE IF NOT EXISTS `treeview_items` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` varchar(11) DEFAULT NULL,
`name` varchar(200) NOT NULL,
`text` varchar(200) NOT NULL,
`link` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;
INSERT INTO `treeview_items` (`id`, `parent_id`, `name`, `text`, `link`) VALUES
(1, '0', 'MySQL', 'MySQL', '#'),
(2, '0', 'Java', 'Java', '#'),
(3, '0', 'PHP', 'PHP', '#'),
(4, '3', '투토리얼', '투토리얼', 'http://link2me.tistory.com'),
(5, '3', 'PHP Script', 'Script', '#'),
(6, '5', '메일', '메일', '#'),
(7, '2', 'Java Tutorial', 'Tutorial', '#'),
(8, '2', 'Java Resources', 'Resources', '#'),
(9, '1', 'MySQL Tutorial', 'Tutorial', '#'),
(10, '5', '로그인', '로그인', 'http://www.naver.com'),
(11, '3', 'PHP Resources', 'Resources', '#'),
(12, '10', 'Login1', 'Login1', ''),
(13, '10', 'Login2', 'Login2', ''),
(14, '3', '추가노드', '추가노드', '');
=== tree.php ===
<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="js/jstree/style.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/jstree/jstree.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tree-container').jstree({
'plugins': ["wholerow"],
'core' : {
'data' : {
"url" : "tree_getdb.php",
"dataType" : "json"
}
}
}).on("changed.jstree", function (e, data) {
if(data.selected.length) {
var id = data.instance.get_node(data.selected[0]).id;
$.post('tree_link_result.php', {id: id}, function(data){
//alert(data);
$('.content').html(data);
});
}
});
});
</script>
</head>
<body>
<div class="container-fluid"><!--container-fluid 클래스 선택자는 전체 화면을 사용할 때 사용 -->
<div class="container"><!--container 클래스 선택자는 최대 넓이가 1170px -->
<div class="col-md-2">
<!--사이드바 내용-->
<div id="tree-container"></div>
</div>
<div class="col-md-10">
<div class="content">
<!--본문 내용-->
본문내용
</div>
</div>
</div>
</div>
</body>
</html>
=== tree_link_result.php ===
<?php
$id=$_POST['id'];
if(isset($id) && !empty($id)){
include_once "connect.php";
$sql = "SELECT * FROM treeview_items where id='{$id}'";
$result = mysqli_query($db, $sql);
if($row=mysqli_fetch_array($result)){
echo $row['link'];
}
}
?>
=== on("changed.jstree", function (e, data) { 부분을 아래와 같이 수정해도 된다.
}).bind("select_node.jstree", function (e, data) {
var id = data.node.id;
$.post('tree_link_result.php', {id: id}, function(data){
//alert(data);
if(data == '#') return '';
$('.content').html(data);
});
나머지 자료는 phpflow.com 과 인터넷에서 구해서 위에 나온 부분만 수정해서 사용하면 문제없이 처리될 것이다.
구글링해서 구해 테스트한 jstree 소스만 첨부한다.
jstree.zip
