axeloz/PHPTreeFormatter.md

## index.php
<?php

require __DIR__.'/tree.php';

$tree = [
	[
		'item'		=> 'John',
		'comment'	=> 'John\'s home directory',
		'class'		=> 'folder',
		'children'	=> [
			[
				'item'			=> 'Documents',
				'comment'		=> 'John\'s documents',
				'class'			=> 'folder',
				'children'		=> [
					[
						'item'			=> 'Personal',
						'class'			=> 'folder',
						'children'		=> [
							[
								'item'			=> 'Résumé.pdf',
								'class'			=> 'file'
							]
						]
					],
					[
						'item'			=> 'Professional',
						'class'			=> 'folder'
					],
				]
			],
			[
				'item'			=> 'Music',
				'comment'		=> 'John\'s music',
				'class'			=> 'folder'
			],
			[
				'item'			=> 'Videos',
				'comment'		=> 'John\'s videos',
				'class'			=> 'folder',
				'children'		=> [
					[
						'item'		=> 'my-baby-2017.mp4',
						'class'		=> 'file'
					],
					[
						'item'		=> 'holidays-in-usa.avi',
						'class'		=> 'file'
					],
				]
			],
			[
				'item'			=> 'Sites',
				'comment'		=> 'John\'s sites',
				'class'			=> 'folder'
			],
		]
	],
	[
		'item'		=> 'Helen',
		'comment'	=> 'Helen\'s home directory',
		'class'		=> 'folder',
		'children'	=> [
			[
				'item'			=> 'Music',
				'comment'		=> 'Helen\'s music',
				'class'			=> 'folder'
			],
			[
				'item'			=> 'Sites',
				'comment'		=> 'Helen\'s sites',
				'class'			=> 'folder'
			],
		]
	]
];

$tree  = drawTree($tree);
?>

<html>
	<head>
		<title>Tree formatter</title>
		<link rel="stylesheet" href="styles.css" media="all" />
	</head>

	<body>
		<h1>Tree</h1>
		<?php echo $tree; ?>
	</body>
</html>


## PHPTreeFormatter.md

      
    Raw
  

              PHPTreeFormatter.md
            
          
    PHP Tree formatter

This Gist provides a PHP function used for displaying nicely formatted tree using CSS only. It supports multiple levels (no limit).
The HTML output is clean and indented. For example :
<ul class="tree level-0">
	<li class="folder">John: <span class="comment">John's home directory</span>
		<ul class="level-1">
			<li class="folder">Documents: <span class="comment">John's documents</span>
				<ul class="level-2">
					<li class="folder">Personal
						<ul class="level-3">
							<li class="file">R&eacute;sum&eacute;.pdf</li>
						</ul>
					</li>
					<li class="folder">Professional</li>
				</ul>
			</li>
			<li class="folder">Music: <span class="comment">John's music</span></li>
			<li class="folder">Videos: <span class="comment">John's videos</span>
				<ul class="level-2">
					<li class="file">my-baby-2017.mp4</li>
					<li class="file">holidays-in-usa.avi</li>
				</ul>
			</li>
			<li class="folder">Sites: <span class="comment">John's sites</span></li>
		</ul>
	</li>
	<li class="folder">Helen: <span class="comment">Helen's home directory</span>
		<ul class="level-1">
			<li class="folder">Music: <span class="comment">Helen's music</span></li>
			<li class="folder">Sites: <span class="comment">Helen's sites</span></li>
		</ul>
	</li>
</ul>


## styles.css
body {
	font-family: Tahoma;
	font-size: 12px;
}

ul.tree, ul.tree ul {
	font-family: Tahoma;
	font-size: 12px;
	list-style: none;
	color: #585858;
	margin: 0;
	padding: 0;
}

ul.tree ul {
	margin-left: 20px;
}

ul.tree li {
	margin: 0;
	padding: 0 7px;
	line-height: 15px;
	border-left:1px solid rgb(218,214,214);
}

ul.tree li:last-child {
	border-left:none;
}

ul.tree li.folder {
	font-size: 13px;
	font-weight: bold;
}

ul.tree li.file {
	font-size: 12px;
	font-weight: normal;
}

ul.tree li:before {
	position:relative;
	top:-0.3em;
	height:1em;
	width:12px;
	color:white;
	border-bottom:1px solid rgb(218,214,214);
	content:"";
	display:inline-block;
	left:-7px;
}

ul.tree li:last-child:before {
	border-left:1px solid rgb(218,214,214);
}

ul .comment {
	font-size: 11px;
	font-style: italic;
	color: #8a8a8a;
	font-weight: normal;
}

## tree.php
<?php

$output = null;

function drawTree($level, $dim = 0) {
	static $output;

	$i = 0;

	// Starting UL node
	$output .=
		PHP_EOL.
		str_pad('', $dim, "\t").
		'<ul class="'.(($dim == 0) ? 'tree ' : '').'level-'.($dim / 2).'">'
	;

	// Looping on level
	foreach ($level as $sublevel) {
		$i ++;

		// Adding item
		$output .=
			PHP_EOL.
			str_pad('', ($dim + 1), "\t").
			'<li class="'.(!empty($sublevel['class']) ? trim($sublevel['class']) : '').'">'.
			(!empty($sublevel['item']) ? htmlentities($sublevel['item']) : htmlentities('<untitled>'))
		;

		// Displaying comment if applicable
		if (!empty($sublevel['comment'])) {
			$output .=
				': <span class="comment">'.
				$sublevel['comment'].
				'</span>'
			;
		}

		// If there is a sublevel
		if (!empty($sublevel['children']) && is_array($sublevel['children']) && count($sublevel['children']) > 0) {
			// Recursivity
			drawTree($sublevel['children'], $dim + 2);
		}

		// Terminating LI
		$output .= '</li>';

		// If end of the sublevel
		if ($i == count($level)) {
			$output .=
				PHP_EOL.
				str_pad('', ($dim), "\t").
				'</ul>'.
				PHP_EOL.
				str_pad('', ($dim - 1), "\t")
			;
		}
	}

	// Returning final output
	return $output;
}
	<?php

	require __DIR__.'/tree.php';

	$tree = [
	[
	'item' => 'John',
	'comment' => 'John\'s home directory',
	'class' => 'folder',
	'children' => [
	[
	'item' => 'Documents',
	'comment' => 'John\'s documents',
	'class' => 'folder',
	'children' => [
	[
	'item' => 'Personal',
	'class' => 'folder',
	'children' => [
	[
	'item' => 'Résumé.pdf',
	'class' => 'file'
	]
	]
	],
	[
	'item' => 'Professional',
	'class' => 'folder'
	],
	]
	],
	[
	'item' => 'Music',
	'comment' => 'John\'s music',
	'class' => 'folder'
	],
	[
	'item' => 'Videos',
	'comment' => 'John\'s videos',
	'class' => 'folder',
	'children' => [
	[
	'item' => 'my-baby-2017.mp4',
	'class' => 'file'
	],
	[
	'item' => 'holidays-in-usa.avi',
	'class' => 'file'
	],
	]
	],
	[
	'item' => 'Sites',
	'comment' => 'John\'s sites',
	'class' => 'folder'
	],
	]
	],
	[
	'item' => 'Helen',
	'comment' => 'Helen\'s home directory',
	'class' => 'folder',
	'children' => [
	[
	'item' => 'Music',
	'comment' => 'Helen\'s music',
	'class' => 'folder'
	],
	[
	'item' => 'Sites',
	'comment' => 'Helen\'s sites',
	'class' => 'folder'
	],
	]
	]
	];

	$tree = drawTree($tree);
	?>

	<html>
	<head>
	<title>Tree formatter</title>
	<link rel="stylesheet" href="styles.css" media="all" />
	</head>

	<body>
	<h1>Tree</h1>
	<?php echo $tree; ?>
	</body>
	</html>
	body {
	font-family: Tahoma;
	font-size: 12px;
	}

	ul.tree, ul.tree ul {
	font-family: Tahoma;
	font-size: 12px;
	list-style: none;
	color: #585858;
	margin: 0;
	padding: 0;
	}

	ul.tree ul {
	margin-left: 20px;
	}

	ul.tree li {
	margin: 0;
	padding: 0 7px;
	line-height: 15px;
	border-left:1px solid rgb(218,214,214);
	}

	ul.tree li:last-child {
	border-left:none;
	}

	ul.tree li.folder {
	font-size: 13px;
	font-weight: bold;
	}

	ul.tree li.file {
	font-size: 12px;
	font-weight: normal;
	}

	ul.tree li:before {
	position:relative;
	top:-0.3em;
	height:1em;
	width:12px;
	color:white;
	border-bottom:1px solid rgb(218,214,214);
	content:"";
	display:inline-block;
	left:-7px;
	}

	ul.tree li:last-child:before {
	border-left:1px solid rgb(218,214,214);
	}

	ul .comment {
	font-size: 11px;
	font-style: italic;
	color: #8a8a8a;
	font-weight: normal;
	}
	<?php

	$output = null;

	function drawTree($level, $dim = 0) {
	static $output;

	$i = 0;

	// Starting UL node
	$output .=
	PHP_EOL.
	str_pad('', $dim, "\t").
	'<ul class="'.(($dim == 0) ? 'tree ' : '').'level-'.($dim / 2).'">'
	;

	// Looping on level
	foreach ($level as $sublevel) {
	$i ++;

	// Adding item
	$output .=
	PHP_EOL.
	str_pad('', ($dim + 1), "\t").
	'<li class="'.(!empty($sublevel['class']) ? trim($sublevel['class']) : '').'">'.
	(!empty($sublevel['item']) ? htmlentities($sublevel['item']) : htmlentities('<untitled>'))
	;

	// Displaying comment if applicable
	if (!empty($sublevel['comment'])) {
	$output .=
	': <span class="comment">'.
	$sublevel['comment'].
	'</span>'
	;
	}

	// If there is a sublevel
	if (!empty($sublevel['children']) && is_array($sublevel['children']) && count($sublevel['children']) > 0) {
	// Recursivity
	drawTree($sublevel['children'], $dim + 2);
	}

	// Terminating LI
	$output .= '</li>';

	// If end of the sublevel
	if ($i == count($level)) {
	$output .=
	PHP_EOL.
	str_pad('', ($dim), "\t").
	'</ul>'.
	PHP_EOL.
	str_pad('', ($dim - 1), "\t")
	;
	}
	}

	// Returning final output
	return $output;
	}