[jQuery] easyUI treeview 만들기 (MySQL to JSON tree using PHP)

Web 프로그램/메뉴 만들기 2016. 12. 24. 20:35

728x90

Tree 형태의 JSON 을 만드는 방법으로 easyUI jQuery 를 사용하는 방법을 테스트 했다.

id: "1",
name: "loreim ipsum",
data: {},
children: [{
    id: "2",
    name: "lorem ipsum1",
    data: {},
    children: [{
        id: "3",
        name: "lorem ipsum2",
        data: {},
        children: [{

tree 형태의 JSON을 만드는 방법은

http://stackoverflow.com/questions/4328515/convert-php-array-to-json-tree

에 나온 걸 참조하면 된다.

Convert PHP array to JSON tree

=== treeSQLtoJSON.php ===

<?php
include_once "connect.php";
$sql = "SELECT * FROM treeview_items";
$res = mysqli_query($db, $sql);
while($row = mysqli_fetch_assoc($res)){
    $data[] = $row;
}

$node = array();
// Build array of item references:
foreach($data as $key => &$item) {
   $node[$item['id']] = &$item;
   // Children array:
   $node[$item['id']]['children'] = array();
   // Empty data class (so that json_encode adds "data: {}" )
   $node[$item['id']]['data'] = new StdClass();
}

// Set items as children of the relevant parent item.
foreach($data as $key => &$item)
   if($item['parent_id'] && isset($node[$item['parent_id']]))
      $node [$item['parent_id']]['children'][] = &$item;

// Remove items that were added to parents elsewhere:
foreach($data as $key => &$item) {
   if($item['parent_id'] && isset($node[$item['parent_id']]))
      unset($data[$key]);
}

$json = json_encode($data);
echo $json;
?>

=== treeview.php ===

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Basic Tree - jQuery EasyUI Demo</title>
<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"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="js/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="js/easyui/themes/icon.css">
<link rel="stylesheet" href="js/easyui/demo.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 type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#tt').tree({
        url: 'treeSQLtoJSON.php',
        onClick: function(node){
            //alert(node.link);
            $('.content').html(node.link);
        }
    });
});
</script>

</head>
<body>
<div style="margin:20px 0;"></div>
<div class="container-fluid">
<div class="container">
    <div class="col-md-2 sidenav">
    
        <div class="easyui-panel" style="padding:5px">
            <ul id="tt"></ul>
        </div>
    </div>
    <div class="col-md-10">
        <div class="content">
        
        본문내용
        </div>
    </div>
</div>
</div>
</body>
</html>

코드가 훨씬 심플해졌다.

이제 http://www.jeasyui.com/demo/main/index.php 사이트 데모를 가지고 만들어보기가 훨씬 수월해졌다.

저작자표시 비영리

'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 using PHP) (0)	2016.12.23
[jQuery] jsTree Treeview 만들기(MySQL to JSON tree using PHP) (0)	2016.12.21

Link2Me