[jQuery] jsTree Treeview 만들기(MySQL to JSON tree using PHP)

Web 프로그램/메뉴 만들기 2016. 12. 21. 00:00

728x90

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">
<div class="container">
    <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

저작자표시 비영리

'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글

[bootstrap] navbar-fixed-top 설정때문에 (0)	2017.02.07
[bootstrap] TopMenu, 로그인, 로그아웃 처리 (0)	2017.02.01
[jQuery] jQuery 토글 및 메뉴 만들기 - 1 (0)	2017.01.26
[jQuery] easyUI treeview 만들기 (MySQL to JSON tree using PHP) (0)	2016.12.24
[jQuery] easyUI treeview 만들기 (MySQL to JSON using PHP) (0)	2016.12.23

Link2Me