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.
comments powered by Disqus