Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вывод каталога в виде дерева на js (https://javascript.ru/forum/dom-window/47537-vyvod-kataloga-v-vide-dereva-na-js.html)

Greyson 27.05.2014 18:04

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



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

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

bes 13.06.2014 09:37

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

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

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

Vlasenko Fedor 13.06.2014 23:27

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

bes 14.06.2014 23:28

для затравки
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 15.06.2014 01:19

bes,
if (empty($files)) continue;
лишнее

bes 15.06.2014 02:22

Цитата:

Сообщение от Poznakomlus
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 15.06.2014 03:51

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

Aetae 15.06.2014 05:26

http://javascript.ru/ui/ajaxtree

bes 15.06.2014 09:22

Цитата:

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

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


Часовой пояс GMT +3, время: 20:16.