<?php
// Exemple de données d'entrée : un tableau simple
$filesArray = [
"fichier1",
"fichier2",
"fichier3",
"toto1",
"toto2",
"toto3",
"toto4"
];
// Fonction pour construire l'arborescence à partir du tableau simple
function buildTree($files) {
$result = [];
$parents = [];
// Définir les parents et enfants
foreach ($files as $file) {
// Sépare le nom du fichier en parent et enfant (par exemple, en ajoutant un préfixe pour les enfants)
if (strpos($file, 'fichier') === 0) {
$parents[$file] = [];
} else {
// Associer l'enfant au dernier parent trouvé
$parentKey = end(array_keys($parents)); // Dernier parent
if ($parentKey) {
$parents[$parentKey][] = ["name" => $file];
}
}
}
// Convertir les parents et enfants en un tableau final
foreach ($parents as $parent => $children) {
$result[] = ["name" => $parent, "children" => $children];
}
return $result;
}
// Générer l'arborescence
$filesData = buildTree($filesArray);
// Convertir en JSON
$jsonData = json_encode($filesData);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree Viewer</title>
<style>
ul {
list-style-type: none;
padding-left: 20px;
}
.toggle {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Arborescence des fichiers</h1>
<ul id="fileTree"></ul>
<script>
// Utiliser le JSON généré par PHP
const filesData = <?php echo $jsonData; ?>;
function createTree(files) {
const ul = document.createElement('ul');
files.forEach(file => {
const li = document.createElement('li');
const span = document.createElement('span');
span.classList.add('toggle');
span.textContent = file.name;
li.appendChild(span);
if (file.children) {
const childUl = createTree(file.children);
li.appendChild(childUl);
}
ul.appendChild(li);
});
return ul;
}
const fileTree = createTree(filesData);
document.getElementById('fileTree').appendChild(fileTree);
document.querySelectorAll('.toggle').forEach(item => {
item.addEventListener('click', event => {
const nextUl = item.nextElementSibling;
if (nextUl) {
nextUl.style.display = nextUl.style.display === 'none' || nextUl.style.display === '' ? 'block' : 'none';
}
});
});
// Initialiser l'affichage des sous-listes
/*document.querySelectorAll('#fileTree ul').forEach(ul => {
ul.style.display = 'none'; // Par défaut, caché
});*/
</script>
</body>
</html>