Drzewko katalogów oparte na jsTree i SPL - It's possible! MateuszTymek.pl

Head's up! This post was written back in 2009 and is very likely to contain outdated information.

Czasem aplikacja wymaga aby zaprezentować użytkownikowi drzewko odzwierciedlające strukturę katalogów na serwerze. Zaprezentuję więc przykładowe rozwiązanie, oparte na jsTree (wyświetli drzewko po stronie klienta) oraz klasie DirectoryIterator z biblioteki SPL (wygeneruje drzewko po stronie serwera).

Klient

Pierwszą czynnością którą trzeba wykonać jest pobranie biblioteki jsTree i umieszczenie jej gdzieś na serwerze - na przykład w katalogu /jstree. Potem dołączamy odpowiedni plik w sekcji <head>, tuż po bibliotece jQuery:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jstree/jquery.tree.min.js"></script>

Nasze drzewko będzie umieszczone w specjalnym elemencie DIV - w dowolnym miejscu strony:

<div id="folders"></div>

Teraz można utworzyć drzewko:

<script type="text/javascript">
$(document).ready(function() {
    $('#folders').tree({
        data : {
            async: true,
            type: 'json',
            opts: {
                method: 'GET',
                url: 'tree.php'
            }
        }
    });
});
</script>

Przedstawiony kod tworzy drzewo w trybie asynchronicznym - dane będą pobierane z serwera w osobnym żądaniu. Chcemy otrzymać generować je w formacie JSON, w skrypcie tree.php.

Tyle wystarczy. jsTree samo zadba o pobranie danych i zaprezentowanie ich w odpowiedniej formie.

Serwer

Zadaniem skryptu tree.php jest wygenerowanie drzewa w postaci JSON, na przykład takiego:

[
	{
		data : "Directory 1",
		children : [
			{ data : "Child 1" },
			{ data : "Child 2" },
			{ data : "Child 3" }
		]
	},
	{
		data : "Directory 2"
	}
]

Nie trzeba się przejmować formatem JSON - wystarczy utworzyć zwykłą tablicę PHP, a następnie zakodować ją przy pomocy funkcji json_encode (lub metody Zend_Json::encode jeśli korzystamy z Zenda).

Oto zawartość pliku tree.php:

function buildDirTree($root)
{
    $nodes = array();
    foreach ($root as $file) {
        if ($file->isDir() && !$file->isDot() && !$file->isLink()) {
            $node['data'] = array(
                'title' => $file->getFilename()
            );
            $dir = new DirectoryIterator($file->getPathName());
            $children = $this->buildDirTree($dir);
            $node['children'] = $children;
            $nodes[] = $node;
        }
    }
    return $nodes;
}

$dir = new DirectoryIterator('.');
$tree = $this->buildDirTree($dir);

echo json_encode($tree);

Wybrany katalog jest skanowany przy pomocy rekurencyjnej funkcji buildDirTree(). Generuje ona tablicę o odpowiedniej strukturze. Interesują nas tylko katalogi, jednak wystarczy usunąć warunek $file->isDir() z instrukcji warunkowej aby drzewko zawierało także pliki.

Efekt widać na ilustracji na początku artykułu.

jquery jstree spl