File "code015.php"
Full Path: /home/analogde/www/Massage/liste/code015.php
File size: 7.47 KB
MIME-type: text/x-php
Charset: utf-8
<?php
// Paramètres de connexion à la base de données
$servername = "localhost";
$username = "votre_utilisateur";
$password = "votre_mot_de_passe";
$dbname = "votre_base_de_donnees";
$servername = "analogdepat.mysql.db";
$username = "analogdepat";
$password = "Un92pac007";
$dbname = "analogdepat";
// Créer une connexion
$conn = new mysqli($servername, $username, $password, $dbname);
// Vérifier la connexion
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Requête SQL pour récupérer les données
$sql = "SELECT name, element FROM lists";
$result = $conn->query($sql);
// Tableau multidimensionnel pour stocker les résultats
$data = array();
if ($result->num_rows > 0) {
// Parcourir les résultats et les stocker dans le tableau
while($row = $result->fetch_assoc()) {
$name = $row['name'];
$element = $row['element'];
// Si la clé 'name' n'existe pas, créer un nouveau tableau
if (!isset($data[$name])) {
$data[$name] = array();
}
// Ajouter l'élément au tableau correspondant à 'name'
$data[$name][] = $element;
}
} else {
echo "0 results";
}
// Fermer la connexion
$conn->close();
// Convertir le tableau en JSON
$jsonData = json_encode($data);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree View with Context Menu</title>
<style>
ul {
list-style-type: none;
}
.nested {
display: none;
}
.caret {
cursor: pointer;
user-select: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.context-menu {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.context-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.context-menu li {
padding: 8px 16px;
cursor: pointer;
}
.context-menu li:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul id="treeView"></ul>
<div id="contextMenu" class="context-menu">
<ul>
<li onclick="handleOption1()">Option 1</li>
<li onclick="handleOption2()">Option 2</li>
<li onclick="handleOption3()">Option 3</li>
<li onclick="handleOption4()">Option 4</li>
</ul>
</div>
<script>
// Récupérer les données JSON depuis PHP
const data = <?php echo $jsonData; ?>;
// Fonction pour créer le tree view
function createTreeView(data, parentElement) {
for (const name in data) {
const li = document.createElement('li');
const span = document.createElement('span');
span.className = 'caret';
span.textContent = name;
li.appendChild(span);
const ul = document.createElement('ul');
ul.className = 'nested';
data[name].forEach(element => {
const elementLi = document.createElement('li');
const elementSpan = document.createElement('span');
elementSpan.textContent = element;
elementLi.appendChild(elementSpan);
ul.appendChild(elementLi);
});
li.appendChild(ul);
parentElement.appendChild(li);
}
}
// Fonction pour déplier/replier les éléments
function toggleNested(event) {
const target = event.target;
if (target.classList.contains('caret')) {
target.classList.toggle('caret-down');
const nested = target.nextElementSibling;
if (nested && nested.classList.contains('nested')) {
nested.style.display = nested.style.display === 'block' ? 'none' : 'block';
}
}
}
// Créer le tree view
const treeView = document.getElementById('treeView');
createTreeView(data, treeView);
// Ajouter l'événement de clic pour déplier/replier les éléments
treeView.addEventListener('click', toggleNested);
// Ajouter l'événement de clic droit pour afficher le menu contextuel
treeView.addEventListener('contextmenu', function(event) {
event.preventDefault();
const contextMenu = document.getElementById('contextMenu');
const target = event.target.closest('span');
if (target) {
const name = target.parentElement.previousElementSibling.textContent;
const element = target.textContent;
contextMenu.style.display = 'block';
contextMenu.style.left = event.pageX + 'px';
contextMenu.style.top = event.pageY + 'px';
contextMenu.dataset.name = name;
contextMenu.dataset.element = element;
}
});
// Ajouter l'événement de clic pour fermer le menu contextuel
document.addEventListener('click', function(event) {
const contextMenu = document.getElementById('contextMenu');
if (!contextMenu.contains(event.target)) {
contextMenu.style.display = 'none';
}
});
// Ajouter l'événement de touche pour fermer le menu contextuel
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const contextMenu = document.getElementById('contextMenu');
contextMenu.style.display = 'none';
}
});
// Fonctions pour gérer les options du menu contextuel
function handleOption1() {
const contextMenu = document.getElementById('contextMenu');
const name = contextMenu.dataset.name;
const element = contextMenu.dataset.element;
window.location.href = `option1.php?name=${encodeURIComponent(name)}&element=${encodeURIComponent(element)}`;
}
function handleOption2() {
const contextMenu = document.getElementById('contextMenu');
const name = contextMenu.dataset.name;
const element = contextMenu.dataset.element;
window.location.href = `option1.php?name=${encodeURIComponent(name)}&element=${encodeURIComponent(element)}`;
}
function handleOption3() {
const contextMenu = document.getElementById('contextMenu');
const name = contextMenu.dataset.name;
const element = contextMenu.dataset.element;
window.location.href = `option1.php?name=${encodeURIComponent(name)}&element=${encodeURIComponent(element)}`;
}
function handleOption4() {
const contextMenu = document.getElementById('contextMenu');
const name = contextMenu.dataset.name;
const element = contextMenu.dataset.element;
window.location.href = `option1.php?name=${encodeURIComponent(name)}&element=${encodeURIComponent(element)}`;
}
</script>
</body>
</html>