Lister dossier avec un arbre / tree en php / javascript

Télécharger le projet
Commenter

Description

Code complet permettant de lister sous forme de menu l'arborescence d'un dossier FTP.

Chaque dossier peut être ouvert ou fermé grâce à des boutons [+] et [-]. Si le dossier est vide, il n'affiche ni le [+], ni le [-] mais une ligne verticale.

Chaque titre de dossier est un lien passant en paramètre le chemin du dossier en question, ainsi, le dossier passé en paramètre est directement ouvert au chargement de la page.

Le path est sécurisé, on ne peut remonter les dossier en faisant ../

Le seul bémol est qu'il y a un éspace entre chaque ligne , ce qui sépare les petites images (pointillés).

Source / Exemple : 


<style type="text/css">
		.lien:hover
		{
		     cursor: pointer;
		}
		</style>
		<script language="javascript">
			function toggle(id, img, fin)
			{
				var elmt = document.getElementById(id);
				if(fin == 1)
				{
					if(elmt.style.display == "none")
					{
						elmt.style.display = "";
						img.setAttribute("src", "./images/moinspetit.png");
					}
					else
					{
						elmt.style.display = "none";
						img.setAttribute("src", "./images/pluspetit.png");
					}
				}
				else
				{
					if(elmt.style.display == "none")
					{
						elmt.style.display = "";
						img.setAttribute("src", "./images/moins.png");
					}
					else
					{
						elmt.style.display = "none";
						img.setAttribute("src", "./images/plus.png");
					}
				}
			}
		</script>
		<?php
		$path = $_GET['path'];
		$path = preg_replace('#((\.+\/+)*)#', '', $path); // on enleve les ./ ../ ..// .../ ...// .../// etc
		//$path = preg_replace('#(\.+)#', '', $path); //on vire les . .. ... ..... etc
		$path = preg_replace('#(\/*)$#', '/', $path); //on remplace / // /// /// (à la fin ) etc ... par /
		$path = preg_replace('#(\/+)#', '/', $path); //on remplace / // /// /// etc ... par /
		$path = preg_replace('#^(\/)#', '', $path); // on supprimer le / du début
		$path = preg_replace('#^(\.+\/+)#', '', $path); //on supprimer les ./ ../ etc du début
		$path = preg_replace('#(\.+)$#', '', $path); //on vire les . .. ... ..... etc de la fin
		$path = preg_replace('#^(\.+)#', '', $path); //on vire les . .. ... ..... etc du début
		$path = './'.$path;
		$folders = explode("/", $path);
		$i = '-1';
		$hierar = '0';
		$texte = '';
		$vide = '';
		function compte($chemin)
		{
			$i = '0';
			$dir = opendir($chemin) or die("erreur");
			while ($f = readdir($dir)) 
			{
				if($f != '.' && $f != '..')
					if(is_dir($chemin.$f))
						$i++;
			}
			
			return $i;
		}
		function parcour($chemin, $videok)
		{
			$nombre = 0;
			global $folders;
			global $hierar;
			global $vide;
			$hierar++;
			global $texte;
			global $i;
			$dir = opendir($chemin) or die("erreur");
			while ($f = readdir($dir)) 
			{
				if($f != '.' && $f != '..')
				{
					if(is_dir($chemin.$f))
					{	
						$nombre++;
						$nombrefolder = compte($chemin.'/');
						$nombresusfolder = compte($chemin.$f.'/');
						if($nombrefolder == $nombre)
							$vide[$hierar] = 1;
						else
							$vide[$hierar] = 0;
						$i++;
						if($hierar > '1')
						{
							for($nb=1; $nb < $hierar; $nb++)
								if($videok[$nb] == '1')
									$texte .= '<img src="./images/vide.png" alt="" />';
								else
									$texte .= '<img src="./images/verti.png" alt="" />';
						}
						if($nombresusfolder == '0')
						{
							if($nombrefolder == $nombre)
								$texte .= '<img src="./images/simplepetit.png" />';
							else
								$texte .= '<img src="./images/simple.png" />';
						}
						else
						{
							$texte .= '<img class="lien" onclick="javascript:toggle(\'dossier'.$i.'\', this, '.$vide[$hierar].');"';
							
							if($nombrefolder == $nombre)
							{
								if($folders[$hierar] != $f)
									$texte .= ' src="./images/pluspetit.png" alt="[+]" />';
								else
									$texte .= ' src="./images/moinspetit.png" alt="[-]" />';
							}
							else
							{
								if($folders[$hierar] != $f)
									$texte .= ' src="./images/plus.png" alt="[+]" />';
								else
									$texte .= ' src="./images/moins.png" alt="[-]" />';
							}
						}
						//AFFICHAGE DE LA LIGNE
						$texte .= ' <img src="./images/mini_folder.png" /> <a href="./tree.php?path='.$chemin.$f.'">'.$f.'</a><br />';
						//FIN AFFICHAGE DE LA LIGNE
						$texte .= '<div id="dossier'.$i.'"';
						if($folders[$hierar] != $f)
							$texte .= ' style="display: none;"';
						else
							$texte .= ' alt="[+]" ';
						$texte .= ' />';
						parcour($chemin.$f.'/', $vide);
						
						$texte .= '</div>';
						
					}
				}
			}
			closedir($dir);
			$hierar--;
			return $texte;
		}
		
		echo parcour("./", $vide);
		?>

Conclusion :


ben, amusez-vous bien ! ;-)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.