Tree List: Expand/Collapse

Zurück: Demo-Übersicht

Status: [Live].

Tree-List- Basiskontrakt bereits verstanden (expanded/childrenKey).

Client-/Server-Dualismus wie bei Sorting: $opts['expandUrl'] liefert den No-JS-Fallback (analog zu sortUrl bei dataGrid() Sorting); scripts/treelist.js übernimmt bei vorhandenem JavaScript das Auf-/Zuklappen clientseitig, ohne Seiten-Reload.

$expandUrl = static fn (string $key, bool $expand) => wl($ID, ['toggle' => $key, 'x' => $expand ? 1 : 0]);
echo $widgets->treeList($columns, $rows, [
    'rowKey'    => 'id',
    'expanded'  => $_SESSION['treelist_expanded'] ?? [],
    'expandUrl' => $expandUrl,
]);

Jede Elternzeile trägt einen sichtbaren Auf-/Zuklapp-Link (.wk-treelist__toggle, ▶/▼, mit dynamischem aria-label „Aufklappen„/„Zuklappen“) in ihrer ersten Spalte: $opts['expandUrl'](string $key, bool $expand) liefert die Server-URL, die $opts['expanded'] für den nächsten Render aktualisiert.

Alle aufklappen / zuklappen: rendert expandUrl automatisch als Toolbar oberhalb der Liste (toolbar()-Aufruf) — die Buttons rufen dasselbe Callable mit den Pseudo-Keys *all bzw. *none auf; der Server setzt expanded auf alle Elternzeilen-Keys bzw. ein leeres Array. Normale Links, kein Sonderfall gegenüber einer einzelnen Zeile.

Client-Schicht (scripts/treelist.js): bereits gerenderte (server-aufgeklappte) Teilbäume klappen clientseitig ohne Reload zu und wieder auf (hidden-Attribut, aria-expanded-Sync); das Aufklappen einer server-zugeklappten Zeile folgt dem Link — deren Kinder sind bewusst nicht im DOM (Render-Grenze aus Grundlagen).

Siehe Abschnitt 4; der Screen-Handler aktualisiert expanded aus dem toggle/x-Parameter (bzw. setzt bei *all/*none alle/ keine) und rendert neu.

• Client-Zuklappen ist rein visuell — der Server-Zustand (expanded) ändert sich erst über die Links; nach einem Reload gilt wieder der Server-Zustand.

Der Auf-/Zuklapp-Toggle ist ein nativer, fokussierbarer Link mit dynamischem aria-label — Tastatur- und Screenreader-Bedienung funktioniert ohne Zusatzcode; aria-expanded an der Zeile folgt dem Zustand.

Symptom: „Alle aufklappen„ wirkt, aber einzelne Zeilen klappen nach Reload wieder zu.

Ursache: der Screen-Handler persistiert expanded nicht (z. B. Session vergessen).

Lösung: expanded serverseitig speichern und beim Render durchreichen (Abschnitt 4).

• Demo-Übersicht — alle Kategorien
• Tree List: Grundlagen — expanded/childrenKey-Kontrakt
• DataGrid: Sorting — Vorbild für den Client-/Server-Dualismus