DataGrid: selection

Nazaj: predstavitveni pregled

Stanje: [Live]. Reference: Fluent UI DetailsList (SelectionMode.multiple), vzorec množičnega urejanja zaostanka Azure DevOps (orodna vrstica izbire), izbira s potrditvenimi polji v mreži DevExpress, seznami VS Code (model Ctrl/Shift).

Poglobi del selection/rowKey iz osnovne pogodbe dataGrid(): enojno in večkratno izbiro vrstic, upravljanje z miško/tipkovnico, API JS za porabnike.

• Že razumljena osnovna pogodba dataGrid().
• Pri multi: vsaka vrstica potrebuje vrednost stolpca, ki jo enolično opredeli (za rowKey).

Stanje izbire je lokalno za pogled: sprememba filtra, razvrščanja ali strani izbriše izbiro (namenoma — brez nevidno vztrajajoče izbire med pogledi).

Aktivna vrstica ≠ izbira: kot v Fluent UI DetailsList sta kazalec fokusa (roving tabindex) in izbira (aria-selected) ločena koncepta — puščice premikajo fokus, preslednica/klik spremeni izbiro.

echo $widgets->dataGrid($columns, $rows, [
    'selection' => 'single',
]);

Napačno: usmeriti rowKey na stolpec, katerega vrednost ni edinstvena (npr. status). Več vrstic bi tedaj poslalo enako vrednost selection[] — strežnik jih na strani strežnika ne more razlikovati.

echo $widgets->dataGrid($columns, $rows, [
    'selection' => 'multi',
    'rowKey'    => 'id',
]);

Klik/puščice označijo aktivno vrstico (aria-selected, --wk-admin-row-selected-bg); Ctrl+C jo kopira (zmaga data-wk-copy vrstice, sicer besedilo celic, povezano s tabulatorji — glej Data Export).

• Stolpec s potrditvenimi polji: prvi stolpec s pravimi celicami <input type="checkbox" name="selection[]" value="<rowKey>"> plus potrditveno polje v glavi („izberi/prekliči vse vidne vrstice„, nedoločeno pri delni izbiri). Potrditvena polja so znotraj obdajajočega <form> — s tem izbira deluje popolnoma brez JavaScripta (POST obrazca selection[]).
• Miška: klik na potrditveno polje ga preklopi; Ctrl+klik na vrstico ga prav tako preklopi; Shift+klik izbere obseg od nazadnje aktivne do kliknjene vrstice.
• Tipkovnica: puščice premikajo aktivno vrstico, preslednica jo preklopi, Shift+puščica razširi obseg, Ctrl+A izbere vse vidne vrstice, Ctrl+C kopira vse izbrane vrstice (vrstico za vrstico; zmaga lastni atribut data-wk-copy vsake vrstice — glej Data Export). Vsebnik nosi aria-multiselectable=„true“, vrstice nosijo aria-selected.

• wkDataGrid.getSelection(gridEl) → polje vrednosti rowKey trenutno izbranih vrstic.
• Ob vsaki spremembi mreža sproži mehurčkajoč CustomEvent wk-selectionchange z detail = { keys: string[], count: number }.

document.querySelector('.wk-datagrid').addEventListener('wk-selectionchange', (ev) => {
    console.log(ev.detail.count, 'vrstic izbranih:', ev.detail.keys);
});

echo $widgets->dataGrid($columns, $rows, [
    'selection' => 'multi',
    'rowKey'    => 'id',
]);

• Izbira velja na pogled: sprememba filtra, razvrščanja ali strani jo izbriše (namenoma, glej odsek 3).
• Brez „pomnjenja izbire med stranmi„ — vsak nov pogled se začne s prazno izbiro.

• Popoln pregled: accessibility (konsolidirano, tu ni podvojeno).
• Brez JavaScripta multi ostane povsem uporaben (POST obrazca); single za označevanje s klikom zahteva JavaScript, nativna navigacija s tabulatorjem pa je vedno ohranjena.

Simptom: stolpec s potrditvenimi polji manjka kljub selection => 'multi'.

Vzrok: rowKey manjka v $opts — gradnik tiho degradira na none.

Rešitev: nastavite $opts['rowKey'] na edinstven ključ stolpca.

• predstavitveni pregled — vse kategorije
• DataGrid: Data Editing (množična dejanja) — orodna vrstica izbire, množične operacije na izbiri
• FluentUI: Vertical Grid (Property Grid) — predstavitveni pregled — inšpektor lastnosti, ki se lahko odzove na wk-selectionchange
• DataGrid: accessibility — popoln pregled ARIA/tipkovnice