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.