TreeView: Selection / Checkboxes

Nazaj: predstavitveni pregled

Stanje: [Live]. Vir: lib/plugins/wkfluentui/helper/widgets.php (izris tree()) in lib/plugins/wkfluentui/scripts/treeview.js (izpeljava starševskega stanja, tipke s puščicami). Referenca: DevExpress-ova checkbox-izbira drevesa (rekurzivna izpeljava stanja starš/otrok).

osnovna pogodba TreeViewa že razumljena; vsako izbirljivo vozlišče potrebuje stabilno vrednost key.

Prikaz na odjemalcu proti resnici na strežniku: izpeljava starševskega stanja (indeterminate/aria-checked=„mixed“ pri delni izbiri) je čisti prikaz na odjemalcu, POST vsebuje le dejansko označena listna vozlišča — strežnik sam izračuna posledice za nadrejene skupine (isto pravilo kot pri tristanjnem potrditvenem polju, glej polja obrazca → Check box). Klik na starševsko potrditveno polje se kot ugodnost na odjemalcu kaskadno prenese v poddrevo; listi se kljub temu pošljejo posamično.

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

Napačno: obravnavati starševsko stanje indeterminate kot lastno vrednost POST (glej odsek 7) — ali pričakovati, da je vozlišče brez key izbirljivo (brez key vozlišče ne izriše potrditvenega polja).

• $opts['selection'] => 'none'|'single'|'checkbox' (ista zamisel vrednosti kot pri dataGrid()-u, prenesena na drevo). Pri aktivnem modelu izbire zunanji <ul> nosi role=„tree“, vsako vozlišče role=„treeitem“ + aria-level, skupinska vozlišča aria-expanded.
• $opts['selectionName'] (privzeto tree-selection): ime polja obrazca — single pošlje eno vrednost radijskega gumba, checkbox niz []. Ključ vozlišča selected (bool) nastavi predizbiro.
• checkbox: starševsko stanje se izpelje rekurzivno iz otrok — vsi otroci označeni → starš označen, noben označen → neoznačen, delno označeni → indeterminate + aria-checked=„mixed“ (scripts/treeview.js).
• Tipkovnica: puščici gor/dol se premikata med vidnimi vozlišči, puščici desno/levo odpreta/zapreta skupino; samo potrditveno polje se preklopi z nativno preslednico.

Rezervni način brez JS: vsako potrditveno polje je neodvisno polje obrazca znotraj klicateljevega obdajajočega <form> (tako kot pri dataGrid() Selection) — izpeljava starševskega stanja je čisti prikaz na odjemalcu, izbira se v celoti pošlje brez JavaScripta.

Vedenje ob napaki (zavezujoče): indeterminate se ne sme obravnavati kot lastna vrednost POST — strežnik vidi le dejansko označena listna vozlišča in sam izpelje posledice za skupine.

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

• Vozlišče brez key ne izriše kontrolnika izbire (namerno — sicer bi se pošiljale nesmiselne vrednosti).
• single uporablja nativno semantiko radijskih gumbov — „preklic izbire na nič„ potrebuje klicateljev lasten prazen radijski gumb.

Celoten pregled: Accessibility.

Simptom: starševsko potrditveno polje nikoli ne prikaže mešanega stanja.

Vzrok: JavaScript ni aktiven (mešano stanje je lastnost DOM, ne atribut) — ali pa podrejena potrditvena polja ne ležijo znotraj istega poddrevesa <details>.

Rešitev: preveriti vedenje z aktivnim JavaScriptom; strukturo drevesa gnezditi prek children namesto ploskega izrisa.

• predstavitveni pregled — vsaka kategorija
• Polja obrazca: Check box — tristanjno pravilo, tu preneseno na raven drevesa
• DataGrid: selection — vzorec obrazca brez JS za večkratno izbiro