File "arbre_multi02.php"

Full Path: /home/analogde/www/2024_PHP_24_11_2024/arbre_multi02.php
File size: 3.49 KB
MIME-type: text/x-php
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<?php

function query()
{
    $dbHost = "analogdepat.mysql.db";   
    $dbUsername = "analogdepat"; 	   
    $dbPassword = "Un92pac007";	    
    $dbName = "analogdepat";	
    $mysqli = new mysqli( $dbHost ,  $dbUsername ,  $dbPassword , $dbName);

    if ($mysqli -> connect_errno) 
    {
      echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
      exit();
    }

    $sql = "SELECT * FROM base_fichier"; // ORDER BY Lastname";
    $result = $mysqli -> query($sql);
   
    while($obj = mysqli_fetch_assoc($result))
    {
        echo " **** " .$obj["id"] ." " .$obj["name"] ." " .$obj["nombre_revision"] ." " .$obj["courante"] ." " .$obj["identifiant"];
        echo "<br>";
    }

    $result -> free_result();
    $mysqli -> close();
}

    query();


// Exemple de fichiers et de leurs versions
$files = [
    'document.txt' => ['version1', 'version2', 'version3'],
    'image.png' => ['version1', 'version2'],
    'script.php' => ['version1']
];

// Initialisation du tableau multidimensionnel
$multidimensionalArray = [];

foreach ($files as $file => $versions) {
    // Création de l'entrée pour chaque fichier
    $entry = [
        'fichier' => $file,
        'children' => []
    ];

    // Ajout des versions au tableau children
    foreach ($versions as $version) {
        $entry['children'][] = [
            'fichier' => $version
        ];
    }

    // Ajout de l'entrée au tableau principal
    $multidimensionalArray[] = $entry;
}

// Conversion du tableau en JSON
$jsonData = json_encode($multidimensionalArray);
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tree View</title>
    <style>
        .children {
            display: none;
            margin-left: 20px;
        }
        .folder {
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="treeView"></div>

    <script>
        // Données JSON provenant de PHP
        const data = <?php echo $jsonData; ?>;

        // Fonction pour générer l'arbre
        function generateTree(data) {
            const ul = document.createElement('ul');

            data.forEach(item => {
                const li = document.createElement('li');
                li.className = 'folder';
                li.textContent = item.fichier;

                const childrenUl = document.createElement('ul');
                childrenUl.className = 'children';

                item.children.forEach(child => {
                    const childLi = document.createElement('li');
                    childLi.textContent = child.fichier;
                    childrenUl.appendChild(childLi);
                });

                li.appendChild(childrenUl);
                ul.appendChild(li);

                // Ajouter un gestionnaire d'événements pour le clic sur le nom du fichier seulement
                li.addEventListener('click', function(event) {
                    event.stopPropagation(); // Empêche la propagation de l'événement
                    // Toggle l'affichage des enfants uniquement si l'élément cliqué est le nom du fichier
                    if (event.target === li) {
                        childrenUl.style.display = childrenUl.style.display === 'none' || childrenUl.style.display === '' ? 'block' : 'none';
                    }
                });
            });

            return ul;
        }

        // Générer l'arbre et l'ajouter à la page
        document.getElementById('treeView').appendChild(generateTree(data));
    </script>
</body>
</html>