Dateibäume in Drupal mit JQuery darstellen

12 Juli, 2009 - 13:48

Manchmal möchte man in einer technischen Beschreibung oder einem Tutorial einen Verzeichnisbaum abbilden. Dabei ist es recht mühsam, wenn man ein Bildschirmfoto in einem Dateibrowser machen muss. Auch kann der Leser solch einen als Bild dargestellten Dateibaum nicht auf- und zuklappen oder sogar Dateien anklicken. Dieses Tutorial zeigt, wie man mit dem JQuery Plugin Treeview einen dynamischen Dateibaum in eine Drupal Seite einbinden kann. Im Tutorial gibt es auch ein kleines Skript, um die notwendigen HTML Konstrukte automatisch zu generieren.

Einführendes Beispiel

Zunächst ein kleines Beispiel, was wir in diesem Tutorial überhaupt vorhaben.

  • parentFolder

Der gezeigte Dateibaum ist kein statisches Bild, sondern kann angeklickt werden. Bei Klick auf einen Ordner öffnet bzw. schließt sich die darunter liegende Ebene. Es ist auch möglich einzelne Dateien zu verlinken. Klickt man im obigen Beispiel auf datei.txt, öffnet sich die Datei in einem Browserfenster.

Der HTML Quelltext für das Beispiel sieht folgendermaßen aus:

<script type="text/javascript">$(document).ready(function(){$("#TREEID").treeview();});</script>
<ul class="filetree" id="TREEID">
    <li class="closed"><span class="folder">parentFolder</span>
    <ul>
        <li><span class="folder">subFolder1</span>
        <ul>
            <li><span class="file"><a target="_blank" href="/sites/default/files/datei.txt">datei.txt</a></span></li>
        </ul>
        </li>
        <li><span class="folder">subFolder2</span></li>
    </ul>
    </li>
</ul>

Abgesehen von der JavaScript Anweisung in Zeile 1 und den zusätzlichen <span> Tags ist es eine ganz normale unsortierte HTML Liste. Die in der Liste enthaltenen Ordner und Dateien können wie in Zeile 7 gezeigt verlinkt werden, müssen es aber nicht. Wird ein Ordner verlinkt, so öffnet oder schließt ein Klick den Ordner, aber gleichzeitig wird auch der Link ausgeführt und der Nutzer zu einer neuen Seite geführt.

Generell gilt, dass Ordner mit einem <span> Tag der Klasse folder zu umgeben sind und Dateien mit einem <span> Tag der Klasse file. Möchte man einen Ordner beim ersten Anzeigen geschlossen darstellen, so muss man bei dem zugehörigen <li> Tag (nicht dem <span> Tag) die Klasse closed verwenden. Zeile 3 im folgenden Beispiel zeigt dies.

<script type="text/javascript">$(document).ready(function(){$("#TREEID").treeview();});</script>
<ul class="filetree" id="TREEID">
    <li class="closed"><span class="folder">parentFolder</span>
    <ul>
        <li><span class="file">datei.txt</span></li>
    </ul>
    </li>
</ul>

JQuery Plugin Treeview

Die Darstellung der HTML Liste als dynamischen Dateibaum erfolgt erst während der Anzeige im Browser durch JavaScript und CSS. Die dazu notwendige Funktionalität wird über das JQuery Plugin Treeview zur Verfügung gestellt.

Im Hauptverzeichnis des Plugins, das man vollständig auf seinen Webspace kopieren muss, befindet sich die CSS Datei jquery.treeview.css und die JavaScript Datei jquery.treeview.js. Beide Dateien muss man auf allen Seiten einbinden, auf denen man das Treeview Plugin nutzen möchte. Neben diesen beiden Dateien besteht das Treeview Plugin lediglich aus Bildern, die z.B. zur Darstellung der Ordnersymbole benötigt werden. Diese Bilder kann man austauschen, falls man eine andere Darstellung wünscht.

Damit das JQuery Treeview Plugin die Darstellung der HTML Liste anpasst, muss es explizit aufgerufen werden. Dazu fügt man die in der ersten Zeile in den o.g. Beispielen gezeigte JavaScript Anweisung ein. Dabei muss man darauf achten, dass die TREEID sowohl in Zeile 1 als auch in der eigentlichen Listendefinition in Zeile 2 übereinstimmt. Für jeden Baum auf einer Seite muss man eine eigene eindeutige TREEID vergeben und die JavaScript Anweisung aus Zeile 1 muss für jeden Baum entsprechend angepasst wiederholt werden.

Einbindung JQuery Treeview Plugin in Drupal Seite

Die Einbindung des JQuery Treeview Plugins in eine Drupal Seite ist denkbar einfach. Man kopiert den kompletten Verzeichnisbaum des JQuery Treeview Plugins zunächst in den Hauptordner des verwendeten Themes. Das Treeview Plugin umfasst dabei folgene Dateien.

  • treeview
    • images
      • file.gif
      • folder-closed.gif
      • folder.gif
      • minus.gif
      • plus.gif
      • treeview-black.gif
      • treeview-black-line.gif
      • treeview-default.gif
      • treeview-default-line.gif
      • treeview-famfamfam.gif
      • treeview-famfamfam-line.gif
      • treeview-gray.gif
      • treeview-gray-line.gif
      • treeview-red.gif
      • treeview-red-line.gif
    • jquery.treeview.css
    • jquery.treeview.js

Anschließend passt man die *.info Datei des Themes an und bindet die CSS und JavaScript Datei des Treeview Plugins in jede Seite ein. Dazu fügt man folgende Anweisung ein, wobei man darauf achten sollte, dass diese beiden Anweisungen nach den anderen Anweisungen kommen, die zentrale CSS Dateien des Themes einbinden.

stylesheets[all][] = treeview/jquery.treeview.css
scripts[] = treeview/jquery.treeview.js

Shell Skript zur Generierung der Treeview HTML Liste

Das Erstellen der HTML Liste im vom JQuery Treeview Plugin erwarteten Format ist aufwendig, wenn man es manuell machen würde. Deshalb bietet es sich an, ein Skript zu schreiben, das eine vorhandene Ordnerstruktur durchsucht und die entsprechenden HTML Konstrukte ausgibt.

Das folgende Unix Bash Skript erzeugt ausgehend vom Inhalt des aktuellen Ordners eine vollständige HTML Liste für das JQuery Treeview Plugin. Unterelemente eines Ordners werden stärker eingerückt dargestellt. Auch wenn man vielleicht kein Unix verwendet sondern ein Skript für Windows benötigt, kann man die Funktionsweise an diesem Beispiel nachvollziehen.

#!/bin/bash
#
# outputs folder structure as a nested 
    ...
HTML list # HTML list contains specific markup used by JQuery's treeview plugin # about treeview see: http://plugins.jquery.com/project/treeview # # know issues: # o does not work with whitespaces in dir/file names # # author: Sebastian Stein (http://sebstein.hpfsc.de/) # date: 2009-07-12 # version: 1.0 # license: LGPL 3.0 (2007-06-29) # # homepage: # http://www.soa-bpm-integration.com/2009-07-12-dateibaeume-drupal-jquery-darstellen # # # ChangeLog # # 2009-07-13 - generate JavaScript call above list, too # # 2009-07-12 - initial version # outputs content of folder as treeview list # recursive function: calls itself while stumbling across a directory # # parameter: content of a directory formated as a list function goFolder { tab=$tab"\t" for currFile in "$@"; do if [ -z "$thisFile" ]; then thisFile="$currFile" else thisFile="$thisFile"/"$currFile" fi if [ -d "$thisFile" ]; then # current file is a folder; output and go into it echo -e $tab'
  • '$currFile'' if [ -n "`command ls "$thisFile"`" ]; then tab=$tab"\t" echo -e $tab'
      ' goFolder $(command ls --group-directories-first "$thisFile") echo -e $tab'
    ' tab=${tab%"\t"} fi echo -e $tab'
  • ' else # current file is a file; only output it echo -e $tab'
  • '$currFile'
  • ' fi thisFile=${thisFile%/*} done tab=${tab%"\t"} } #################### # script starts here #################### # compute an ID for the tree treeId=`date | md5sum | sed -e "s/\ \ -//"` echo '' echo '
      ' goFolder `command ls` echo '
    '