Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
react-native
/
2024_PHP_02_11_2024
/
explorer
:
displayTree.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<?php function scanDirectory($directory) { $result = []; $files = scandir($directory); foreach ($files as $file) { if ($file !== '.' && $file !== '..') { $path = $directory . DIRECTORY_SEPARATOR . $file; if (is_dir($path)) { $result[] = [ 'name' => $file, 'type' => 'directory', 'children' => scanDirectory($path) ]; } else { $result[] = [ 'name' => $file, 'type' => 'file' ]; } } } return $result; } function displayTree($tree, $fileData, $level = 0) { foreach ($tree as $item) { if (isset($fileData[$item['name']])) { echo '<ul class="tree-item" style="margin-left: ' . ($level * 20) . 'px; list-style-type: none;">'; echo '<li>'; echo '<span class="toggle" onclick="toggleTree(this)">+</span>'; echo '<span class="name">' . htmlspecialchars($item['name']) . '</span>'; echo '<ul class="sub-list" style="display: none;">'; foreach ($fileData[$item['name']] as $subElement) { echo '<li class="sub-element"><span class="context-menu-trigger">' . htmlspecialchars($subElement) . '</span></li>'; } echo '</ul>'; echo '</li>'; echo '</ul>'; } else { echo '<div class="tree-item" style="margin-left: ' . ($level * 20) . 'px;">'; echo '<span class="toggle" onclick="toggleTree(this)">' . ($item['type'] === 'directory' ? '+' : '') . '</span>'; echo '<span class="name">' . htmlspecialchars($item['name']) . '</span>'; if (isset($item['children'])) { echo '<div class="tree-children" style="display: none;">'; displayTree($item['children'], $fileData, $level + 1); echo '</div>'; } echo '</div>'; } } } $directory = 'path/to/your/directory'; // Remplacez par le chemin de votre répertoire $directory = "/home/analogde/www/2024_PHP/2024_PHP_26_10_2024"; $tree = scanDirectory($directory); ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Tree View</title> <style> .tree-item { cursor: pointer; } .toggle { display: inline-block; width: 20px; text-align: center; } .name { display: inline-block; } .tree-children { margin-left: 20px; } .sub-list { margin-left: 20px; } .sub-element { margin-left: 20px; } .tree-item ul { list-style-type: none; padding: 0; } .context-menu { display: none; position: absolute; background-color: white; border: 1px solid #ccc; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; } .context-menu ul { list-style-type: none; padding: 0; margin: 0; } .context-menu ul li { padding: 10px; cursor: pointer; } .context-menu ul li:hover { background-color: #f0f0f0; } </style> <script> const fileData = <?php echo $jsonData; ?>; function toggleTree(element) { const children = element.nextElementSibling.nextElementSibling; if (children && children.classList.contains('tree-children')) { if (children.style.display === 'none') {