Web 프로그램/메뉴 만들기
PHP Treeview with MySQL and jQuery 예제
Link2Me
2025. 1. 31. 21:33
728x90
PHP 에서 DB 와 연결해서 TreeView 처리하는 코드 예제이다.
Treeview 의 깊이를 좁게 처리하기 위해서 style 을 수정했다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<?php
error_reporting(0); // 경고 출력 없애기
//*
ini_set("display_startup_errors", 1);
ini_set("display_errors", 1);
error_reporting(E_ALL);
// */
require_once 'path.php';// root 폴더를 기준으로 상대적인 경로 자동 구하기
require_once $g['path_root'].'sessionChk.php'; // 세션 체크
require_once $g['path_config'].'config.php';
require_once $g['path_class'].'dbconnect.php';
require_once $g['path_class'].'adminClass.php';
$a = new adminClass();
$dbInstance = new DBDataClass();
$db = $dbInstance->db;
date_default_timezone_set('Asia/Seoul');
// Function to fetch categories
function fetchCategories($parent_id = null, $db) {
$stmt = $db->prepare("SELECT * FROM categories WHERE parent_id " . ($parent_id ? "= :parent_id" : "IS NULL"));
if ($parent_id) {
$stmt->bindParam(':parent_id', $parent_id, PDO::PARAM_INT);
}
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
// Recursive function to build tree
function buildTree($parent_id = null, $db) {
$categories = fetchCategories($parent_id, $db);
if (count($categories) > 0) {
echo '<ul class="nested">';
foreach ($categories as $category) {
echo '<li data-id="' . $category['id'] . '">' . $category['name'];
buildTree($category['id'], $db);
echo '</li>';
}
echo '</ul>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Treeview with MySQL and jQuery</title>
<style>
ul {
list-style-type: none;
padding-left: 10px;
}
li {
cursor: pointer;
padding: 5px;
}
.nested {
display: none; /* 기본적으로 닫힌 상태 */
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>Category Treeview</h1>
<div id="treeview">
<?php buildTree(null, $db); ?>
</div>
<script>
$(document).ready(function () {
// Initially hide all nested lists
$(".nested").show();
// Toggle visibility on click
$("#treeview li").click(function (e) {
$(this).children("ul").slideToggle();
e.stopPropagation(); // Prevent event bubbling
});
});
</script>
</body>
</html>
|
MySQL 테이블 구조
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
CREATE TABLE categories (
id int(11) NOT NULL,
name varchar(255) NOT NULL,
parent_id int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_general_ci;
INSERT INTO categories (id, name, parent_id) VALUES
(1, 'Electronics', NULL),
(2, 'Laptops', 1),
(3, 'Smartphones', 1),
(4, 'Dell', 2),
(5, 'HP', 2),
(6, 'Samsung', 3),
(7, 'Apple', 3);
ALTER TABLE categories
ADD PRIMARY KEY (id),
ADD KEY parent_id (parent_id);
ALTER TABLE categories
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
ALTER TABLE categories
ADD CONSTRAINT categories_ibfk_1 FOREIGN KEY (parent_id) REFERENCES categories (id) ON DELETE CASCADE;
COMMIT;
|
728x90