TreeView: Selection / Checkboxes

Zurück: Demo-Übersicht

Status: [Live]. Quelle: lib/plugins/wkfluentui/helper/widgets.php (tree()-Markup) und lib/plugins/wkfluentui/scripts/treeview.js (Eltern-Ableitung, Pfeiltasten). Referenz: DevExpress-Baum-Checkbox-Selection (rekursive Eltern-/Kind-Zustandsableitung).

TreeView-Basiskontrakt bereits verstanden; jeder auswählbare Knoten braucht einen stabilen key-Wert.

Client-Anzeige vs. Server-Wahrheit: die Eltern-Ableitung (indeterminate/aria-checked=„mixed“ bei Teilauswahl) ist reine Client-Anzeige, der POST enthält nur die tatsächlich angehakten Blatt-Knoten — der Server berechnet Konsequenzen für übergeordnete Gruppen selbst (dieselbe Regel wie bei der Dreizustands-Checkbox, s. Eingabefelder → Check box). Ein Klick auf eine Eltern-Checkbox kaskadiert als Client-Komfort in den Teilbaum; gepostet werden trotzdem die Blätter einzeln.

echo $widgets->tree([
    ['label' => 'de', 'key' => 'de', 'children' => [
        ['label' => 'wiki', 'key' => 'de:wiki', 'selected' => true],
        ['label' => 'blog', 'key' => 'de:blog'],
    ]],
], ['selection' => 'checkbox']);

Falsch: den indeterminate-Elternzustand als eigenen POST-Wert behandeln (s. Abschnitt 7) — oder Knoten ohne key auswählbar erwarten (ohne key rendert der Knoten keine Checkbox).

• $opts['selection'] => 'none'|'single'|'checkbox' (dieselbe Werte-Idee wie bei dataGrid(), auf einen Baum übertragen). Bei aktivem Auswahlmodell trägt das äußere <ul> role=„tree“, jeder Knoten role=„treeitem“ + aria-level, Gruppenknoten aria-expanded.
• $opts['selectionName'] (Default tree-selection): Formularfeldname — single postet einen Radio-Wert, checkbox ein []-Array. Knoten-Schlüssel selected (bool) setzt die Vorauswahl.
• checkbox: Eltern-Zustand leitet sich rekursiv aus den Kindern ab — alle Kinder an → Elternteil an, keines an → aus, teilweise an → indeterminate + aria-checked=„mixed“ (scripts/treeview.js).
• Tastatur: Pfeil hoch/runter wandern zwischen sichtbaren Knoten, Pfeil rechts/links öffnen/schließen eine Gruppe; die Checkbox selbst togglet mit der nativen Leertaste.

No-JS-Fallback: alle Checkboxen sind unabhängige Formularfelder im umschließenden <form> des Aufrufers (wie bei dataGrid() Selection) — die Eltern-Ableitung ist reine Client-Anzeige, die Auswahl postet vollständig ohne JavaScript.

Fehlerverhalten (verbindlich): indeterminate darf nicht als eigener POST-Wert behandelt werden — der Server sieht nur die tatsächlich angehakten Blattknoten und leitet Gruppen-Konsequenzen selbst ab.

echo '<form method="post" action="' . hsc(wl($ID)) . '">';
formSecurityToken();
echo $widgets->tree($namespaceBaum, [
    'selection'     => 'checkbox',
    'selectionName' => 'sichtbare-ns',
]);
echo '<button type="submit" class="wk-btn wk-btn--primary">Übernehmen</button></form>';

• Knoten ohne key rendern kein Auswahl-Control (bewusst — bedeutungslose Werte würden posten).
• single nutzt native Radio-Semantik — ein „Abwählen auf null„ braucht einen eigenen Leer-Radio des Aufrufers.

Vollständiger Überblick: Accessibility.

Symptom: Eltern-Checkbox zeigt nie den Mischzustand.

Ursache: JavaScript inaktiv (Mischzustand ist eine DOM-Property, kein Attribut) — oder die Kind-Checkboxen liegen nicht unter demselben <details>-Teilbaum.

Lösung: Verhalten mit aktivem JavaScript prüfen; Baumstruktur über children verschachteln statt flach rendern.

• Demo-Übersicht — alle Kategorien
• Eingabefelder: Check box — Dreizustands-Regel, hier auf Baum-Ebene übertragen
• DataGrid: Selection — No-JS-Formular-Muster für Mehrfachauswahl