Вывод каталога в виде дерева на js

[Greyson]

Добрый день, подскажите пожалуйста, возможно ли на js вывести все папки и файлы определенного каталога в виде дерева в раскрывающемся списке на сайт. Например обычное дерево каталогов windows:



Я вижу 3 варианта решения проблемы, но ни один не знаю как реализовать:

1. Сайт на WP, сделать все это, что бы автоматически строилось дерево из рубрик, подрубрик и записей в них;
2. Сделать так, что бы читался файл при загрузке страницы, в котором есть строки, например: категория|подкатегория|наз вание|ссылка или что то подобное;
3. И третий (самый лучший) вариант это как я написал выше, что бы автоматом считывало каталог на наличие подкаталогов и файлов в нем.

Сейчас есть только скрипт вывода дерева от treeview.net:

[bes]

так как задача полезна, возможно уже существуют готовые плагины, на которые я бы также взглянул, дабы не изобретать велосипед

а так нужно делать на php обход каталога и его подкаталогов (например, на основе использования функции scandir) и прикручивать вывод к какому-нибудь js-дереву (в твоём случае ещё и учитывать особенности wordpress)

можно погуглить на тему php-js файловых менеждеров

[Vlasenko Fedor]

http://javascript.ru/ui/tree+++
http://wwwendt.de/tech/dynatree/index.html

[bes]

для затравки

define("SEP", "&middot ");
$dir = ".";
echo $dir."<br/>";
function recursive_directory_traversal($dir, $sep) {
	$files = array_diff(scandir($dir), array(".", ".."));
	foreach($files as $value) {
		if (empty($files)) continue;
		$path = $dir."/".$value;
		if (is_dir($path)) {
			echo $sep."<b>".$value."</b><br/>";
			recursive_directory_traversal($path, $sep.SEP);
		} else {
			echo $sep.$value."<br/>";
		}
	}
}
recursive_directory_traversal($dir, SEP);

[Vlasenko Fedor]

bes,

if (empty($files)) continue;

лишнее

[bes]

bes,
if (empty($files)) {
        return;
    }
лишнее

согласен

попутно проба пера использования с http://www.jstree.com/

<meta charset="utf-8">
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.min.js"></script>

<div id="jstree">
<?php
$dir = ".";
function recursive_directory_traversal($dir) {
	echo "<ul>";
	$files = array_diff(scandir($dir), array(".", ".."));
	foreach($files as $value) {
		$path = $dir."/".$value;
		$value = iconv("windows-1251", "utf-8", $value);//
		if (is_dir($path)) {
			echo "<li>".$value;
			recursive_directory_traversal($path);
			echo "</li>";
		} else {
			echo "<li data-jstree='{\"icon\":\"http://jstree.com/tree.png\"}'>".$value."</li>";
		}
	}
	echo "</ul>";
}
recursive_directory_traversal($dir);
?>
</div>
<script>
$(function(){
	$('#jstree').jstree();
});
</script>

[Vlasenko Fedor]

если потребуются параметры размер, дата изменения, модификации и другие, то посоветовал посмотреть RecursiveDirectoryIterator

[Aetae]

http://javascript.ru/ui/ajaxtree

[bes]

если потребуются параметры размер, дата изменения, модификации и другие, то посоветовал посмотреть RecursiveDirectoryIterator

также есть http://www.php.net/manual/ru/ref.filesystem.php