File "test01.php"

Full Path: /home/analogde/www/Python/Monsta-FTP-master/affichahe _expand_collpase_tableau/test01.php
File size: 3.72 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau avec Expand/Collapse</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .hidden-row {
            display: none;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h2 class="text-center mb-4">Tableau des Fichiers</h2>
    <table class="table table-bordered table-striped">
        <thead class="table-dark">
        <tr>
            <th>Nom du Fichier</th>
            <th>Taille (octets)</th>
            <th>Date de Création</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <?php
        // Tableau des données
        $data = [
            "0filtre_P1000118.jpg" => [
                [
                    "file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/0filtre_P1000118.jpg",
                    "size" => 119005,
                    "creation_date" => "2025-01-06 22:40:26"
                ]
            ],
            "1105655.jpg" => [
                [
                    "file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/1105655_v1.jpg",
                    "size" => 262301,
                    "creation_date" => "2025-01-06 22:50:11"
                ],
                [
                    "file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/1105655_v2.jpg",
                    "size" => 262301,
                    "creation_date" => "2025-01-07 22:34:30"
                ]
            ],
            // Ajoute d'autres fichiers...
        ];

        foreach ($data as $mainFile => $details) {
            $rowId = md5($mainFile); // Identifiant unique pour les lignes

            // Première ligne (fichier principal)
            echo "<tr>";
            echo "<td>{$mainFile}</td>";
            echo "<td>" . $details[0]['size'] . "</td>";
            echo "<td>" . $details[0]['creation_date'] . "</td>";

            if (count($details) > 1) {
                echo "<td><button class='btn btn-primary btn-sm toggle-btn' data-target='{$rowId}'>Expand</button></td>";
            } else {
                echo "<td>-</td>";
            }

            echo "</tr>";

            // Lignes supplémentaires (fichiers secondaires)
            foreach ($details as $index => $fileInfo) {
                if ($index > 0) { // Ignorer la première ligne (déjà affichée)
                    echo "<tr class='hidden-row {$rowId}'>";
                    echo "<td>{$fileInfo['file_name']}</td>";
                    echo "<td>{$fileInfo['size']}</td>";
                    echo "<td>{$fileInfo['creation_date']}</td>";
                    echo "<td>-</td>";
                    echo "</tr>";
                }
            }
        }
        ?>
        </tbody>
    </table>
</div>

<script>
    // Script pour gérer l'expansion et la fermeture des lignes
    document.querySelectorAll('.toggle-btn').forEach(button => {
        button.addEventListener('click', () => {
            const target = button.getAttribute('data-target');
            const rows = document.querySelectorAll(`.${target}`);

            rows.forEach(row => {
                if (row.classList.contains('hidden-row')) {
                    row.classList.remove('hidden-row');
                    button.textContent = 'Collapse';
                } else {
                    row.classList.add('hidden-row');
                    button.textContent = 'Expand';
                }
            });
        });
    });
</script>
</body>
</html>