[Workshop] Nested Sets

[theo]

... nur leider gibt es hier so wie es aussieht einen kleinen gedanken stop ... :/

niemals! nur leider kreisen meine gedanken auch um andere dinge und es gibt kunden, die vor dem jahreswechsel noch was reissen wollen. und dann scheint das os in meinem koerper kein linux zu sein ... zumindest hatte ich mir auch noch einen gemeinen virus eingefangen.

was das update angeht, so hab ich dafuer noch keine massenkompatible version an der hand. ich hab eine variante geschrieben, die erstmal nur das frontend betrifft. die wiederum ist an eine php-klasse gekoppelt und daher nicht so besonders fuer einen workshop geeignet. die leute wollen hier was lernen und darum will ich sie nicht verwirren.
die admin ist noch in den kinderschuhen. wenn ich ueber die feiertage etwas zeit habe, dann werde ich mir die sache noch mal in ruhe anschauen. vielleicht kann ich eine version schreiben, die den wuenschen und hoffnungen hier im board einigermassen gerecht wird.


schoene feiertage erstmal fuer euch alle hier im workshop!
hardy

[Boris]

Mal zum Workshop ... wo sind denn die Abbildungen?

[theo]

danke fuer den hinweis boris! mein fehler. warum auch immer ... was auch immer mich geritten hat ... ich hab den ordner auf dem server umbenannt.

alles wieder i.o.

[Schneemann]

Wie kann ich bei einem größeren Baum z.B. 3 beliebige Knoten aufgeklappt halten während andere zu bleiben?

Ich will damit einen Baum wie beim Windows Explorer machen, der soll dann an den Knotenpunkten auf- und zuklappbar sein. Wenn man auf eine Seite wechselt soll sich aber nicht der gesamte Baum zuklappen, sondern an bestimmten Stellen aufgeklappt bleiben.

Wie geht das?

[theo]

hi peter,

da alles, was mit dem ein- und ausklappen im baum zu tun hat, ueber javascript laeuft, ist die loesung auch da zu suchen. das js sorgt dafuer, dass beim klicken auf einen anderen knoten alle anderen eingeklappt werden. deaktiviere einfache diese funktion und du solltest zu deinem gewuenschten ergebnis kommen.


gruss,
hartmut

[Schneemann]

Wieso muss das per JavaScript erfolgen? Ich will das mit einem Reload der Seite machen, also Serverseitig.

Der aktuelle Zustand soll in der Session gespeichert werden, beim Aufruf der neuen Seite lese ich das dann aus.

Es geht mir um das Problem, einen Baum mit 3 verschiedenen offenen Knoten darzustellen.

[theo]

so richtig habe ich dein vorhaben noch nicht verstanden ... das muss ich zugeben.
aber wenn du die sachen eh serverseitig regeln willst, dann wird js eh sinnlos, denn ein realod wuerde die seite in ihren urzustand versetzen.
wenn du die oeffnung verschiedener knoten per php realisieren willst, so musst du das auch mit dessen mitteln arbeiten. da bleibt nur ein get-request, was sicher fuer die steuerung verschiedener geoeffneter und geschlossener knoten ein wenig ueberlegung vorm coden voraussetzt.
auf js wuerde ich in dem falle dann ganz verzichten ...

[Cybergreek]

...auf js wuerde ich in dem falle dann ganz verzichten ...

Dann musst Du erstmal Dich selbst überzeugen, weil Du JS ins Spiel gebracht hast

Ich denke mit reload ist gemeint, dass man auf einen (geschlossenen) Knoten klickt und die Seite wird neu geladen, wobei dieser Knoten aber zusätzlich zu den anderen aufgeklappt ist.

[theo]

Dann musst Du erstmal Dich selbst überzeugen, weil Du JS ins Spiel gebracht hast

... das stimmt nicht ... jan wars!!! ... weil zu der zeit hardy.jsAhnung == null

wenn deine vermutung richtig ist, dann wuerde es die sache schwer vereinfachen, denn er braeuchte nur die id des angeklickten knotens per get uebergeben werden. was aber, wenn er wirklich mehrere knoten nacheinander oeffnen will? dann muesste sich das script die vorher geklickten "irgendwie merken" ...

[Schneemann]

Ich würde gerne (z.B. durch speichern aller offenen Knoten in einer kommaseparierten Zeichenkette in der PHP-Session) verschiedene Knoten öffnen.

Man soll also nicht bei jedem Klick den Baum neu aufklappen müssen.

[theo]

ich hab's geahnt ... puh ... !

also da muesste ich auch erstmal ne weile drueber gruebeln, wie man die sache am besten loest ...
aber mit der session duerftest du schon einen guten ansatz haben. jeder knoten hat ja per definition eine eigene id. die sollte auch ohne weiteres in einer session abgelegt werden koennen. eine regelung muesstest du dir dann einfallen lassen, wie du sie bei nochmaligem klicken wieder entfernst.
prinzipiell sieht es nach einer aufgabe fuer php und css aus. zu beginn muessten alle knoten unter der ersten ebene einen display=none bekommen. ein klick auf den knoten muesste den style von none auf block aendern.
bliebe nur noch die frage, wie man das am geschicktesten loest. eine eigenstaendige css-datei faellt fuer diese aufgabe sicher flach, wenn du den baum dynamisch halten willst. sonst muesstest du nach jeder aenderung in der db die css anpassen. andererseits bekommst du bei einer komplett dynamischen loesung keinen besonders sauberen html-code. aber eine andere loesung sehe ich auf die schnelle nicht.

wenn du eine loesung hast, dann wuerde mich das ergebnis interessieren ... und sicher einige andere hier auch. vielleicht lohnt sich auch das nachdenken ueber eine variante, in der man per vererbung eine css-datei fuer alle ebenen anlegen und deren status per aenderung von klassennamen loesen kann. fuer die anzeige immer jeweils eines zweiges sollte das problemlos moeglich sein.

[Schneemann]

Was haltet ihr von folgender Idee.

Den Baum als kompletten Array darstellen, Keys sind die IDs der jeweiligen Einträge. Die offenen Einträge hat man als ID-Kette in der Session. Per explode zerflückt man die Kette in ein Array. Nachdem man den Baum hat macht manvor der Ausgabe ein unset auf alle Keys die nicht in dem ID-Ketten-Array stehen.

[theo]

also den vorschlag hab ich ehrlich gesagt auch nach mehrmaligem durchlesen nicht gerafft ...
aber machen wir mal ein simples bsp. danach sollte es vielleicht problemlos gelingen:

<ul>
    <li>ebene 1</li>
    <li><a href="">ebene 1</a></li>
    <ul id="ebene2_1" class="ebene2_hidden">
        <li>ebene 2</li>
        <li>ebene 2</li>
        <li><a href="">ebene 2</a></li>
        <ul id="ebene3_1" class="ebene3_hidden">
            <li>ebene 3</li>
            <li>ebene 3</li>
        </ul>
    </ul>
    <li>ebene 1</li>
</ul>

vergessen wir jetzt einfach mal das unsaubere html (die liste ohne css sieht sonst einfach bloed aus).
du musst noch nur bei den knoten eine moeglichkeit zum klicken anbieten, wo auch unterknoten vorhanden sind. diese sollten den naechst folgenden knoten bzw. den namen der untergeordneten liste kennen. ein klick und alle listenobjekte der verschachtelten liste werden angezeigt.
oeffnest du jetzt einen kompletten baum und klickst dann auf den knoten der ebene 1, so wird die darunter liegende liste ausgeblendet, was aber keine aenderung der folgelisten zur folge hat. erneutes klicken ... et voila ... der gesamte vorher geoeffnete baum ist wieder da.
noch ein wort zum css. du koenntest jetzt eine stylesheet.datei anlegen, in der ebenen bis zu einer gewissen tiefe als klassen in form von

.ebene1_hidden { display: none; }
.ebene1_show { display: block; }

.ebene2_hidden { display: none; }
.ebene2_show { display: block; }
....

vorbereitet sind. du braeuchtest dann nur noch die klassennamen wechseln und haettest somit ein sauberen html.code und volle kontrolle ueber die styles.

je laenger ich darueber nachdenke, desto einfacherer erscheint mir die loesung deines problems. selbst sessions werden so unnoetig.

[Boris]

Die Liste funktioniert so nicht, weil das HTML falsch ist, bzw. die Liste falsch verschachtelt.

Man kann das nicht einfach "vergessen" oder sollte sich dann nicht wundern, wenn die Liste nicht korrekt dargestellt wird.

[Schneemann]

Ich erkläre meine Idee nun mal optisch im Sinne des Windows Explorers mit Ordnern.

Wir brauchen einen Array mit den Ordneren. Jeder Ordner hat eine ID die als Array den Inhalt enthält.

Am Anfang hat unser Baum in Ebene 1 drei Ordner die sichtbar sein sollen. Wir wollen beim ersten Aufruf aber die Kinder nicht aufgeklappt haben, also schmeissen wir per unset() nach der Generierung des Array und vor der Ausgabe die "child"-Arrays raus.

Array = 
(
  [10] => Array
    (
      [id] => 10
      [name] => Tier
      [child] = Array
        (
          [70] => Array
            (
              [id] => 70
              [name] => Fisch
            )
          [80] => Array
            (
              [id] => 80
              [name] => Vogel
            )
        )
    )
  [20] => Array
    (
      [id] => 20
      [name] => Mensch
    )
  [30] => Array
    (
      [id] => 30
      [name] => Pflanze
      [child] = Array
        (
          [50] => Array
            (
              [id] => 50
              [name] => Blume
            )
          [60] => Array
            (
              [id] => 60
              [name] => Baum
            )
        )
    )
)

Der Array sollte dann so aussehen:

Array = 
(
  [10] => Array
    (
      [id] => 10
      [name] => Tier
    )
  [20] => Array
    (
      [id] => 20
      [name] => Mensch
    )
  [30] => Array
    (
      [id] => 30
      [name] => Pflanze
    )
)

Wollen wir nun einen Ordner aufklappen, geschieht das mit einem Klick auf ein Plus-Icon, hinterlegt ist die ID des Ordners. Wenn wir nun den Ordner "Tier" aufklappen, klicken wir also einen Link der die ID 10 in die Session speichert.

Es würde uns nun beim Seitenaufruf wieder den ganzen Baum auflisten, beim löschen der "Childs" per unset() geben wir aber an, dass dies nur dann der Fall sein soll, wenn ID != 10 ist. Also macht es den unset() für "child" nur wo das Child nicht in einem Array mit der ID 10 ist. Das sieht dann so aus:

Array = 
(
  [10] => Array
    (
      [id] => 10
      [name] => Tier
      [child] = Array
        (
          [70] => Array
            (
              [id] => 70
              [name] => Fisch
            )
          [80] => Array
            (
              [id] => 80
              [name] => Vogel
            )
        )
    )
  [20] => Array
    (
      [id] => 20
      [name] => Mensch
    )
  [30] => Array
    (
      [id] => 30
      [name] => Pflanze
    )
)

Klickt man dann ein Minus um den Ordner zuzuklappen, wird die ID 10 aus der session entfernt. Klickt man die ID 30 auf, stehen in der Session die IDs 10 und 30, der Baum würde dann voll aufklappen an 2 Knoten gleichzeitig.

Was meint ihr dazu, ist das so machbar? Wie lesen wir das SQL am besten aus, dass wir es in eine passende Array-Struktur bekommen?