DataGrid: selection

Nazaj: predstavitveni pregled

Izbiranje vrstic, posamično ali po več: upravljanje z miško in tipkovnico, stabilni ključi vrstic in vmesnik JavaScript za klicočo kodo.

DataGrid pozna dve vrsti izbire: aktivno vrstico, ki ji sledi predogled, in več označenih vrstic, na katere deluje množični ukaz. Obe je mogoče upravljati z miško in tipkovnico, večkratno izbiro tudi brez JavaScripta.

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).

Aktivna vrstica in izbira sta dve različni stvari. Aktivna vrstica je tista, za katero trenutno gre – od nje je odvisen predogled v stolpcu s podrobnostmi. Izbira so označene vrstice – nanje se nanaša množični ukaz. V načinu multi obstajata drug ob drugem: tri vrstice so označene, četrta je odprta v stolpcu s podrobnostmi. Fluent UI DetailsList loči ista dva pojma.

Aktivna vrstica nosi aria-current=„true“, izbrana vrstica aria-selected=„true“. Puščične tipke premikajo aktivno vrstico, preslednica/klik spremeni izbiro.

Stanje izbire je vezano na pogled: sprememba filtra, razvrščanja ali strani izbiro zavrže (namenoma – brez izbire, ki bi nevidno potovala med pogledi).

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>"> in potrditveno polje v glavi (»izberi/prekliči vse vidne vrstice«, nedoločeno pri delni izbiri). Potrditvena polja so znotraj obdajajočega <form> – zato izbira deluje povsem brez JavaScripta (POST obrazca selection[]).
• Aktivna vrstica: nastavi jo klik ali puščična tipka, ne da bi kar koli označila. Nosi aria-current=„true“ in oznako na začetku vrstice; stolpec s podrobnostmi ji sledi (glejte active v API-ju izbire). Označitve ostanejo nespremenjene.
• 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 CustomEvent wk-selectionchange, ki se širi navzgor (bubbles), z detail = { keys: string[], count: number, active: string|null }.
• keys/count navajata označene vrstice, active aktivno vrstico. Za predogled berite active, za množični ukaz keys. V načinu single gre za isto vrstico.

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

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

Predogled in množični ukaz drug ob drugem, z imeni polj obstoječe strežniške strani:

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

• Izbira velja za posamezen pogled: sprememba filtra, razvrščanja ali strani jo zavrže (namenoma, glejte odsek 3).
• Brez »pomnjenja izbire med stranmi« – vsak nov pogled se začne s prazno izbiro.
• Tudi aktivna vrstica ne preživi menjave strani. Zaslon, ki jo mora ohraniti, jo prenaša v naslovu in jo nastavi ob izrisu (data-wk-current="1" na vrstici).

• 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.
• Brez JavaScripta aktivne vrstice ni. Zaslon, ki ponuja predogled, ima zato za vsako vrstico povezavo – ta zapiše ključ v naslov, strežnik pa izriše predogled.

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.

Simptom: stolpec s podrobnostmi se ob drugi označitvi ne posodablja več.

Vzrok: poslušalec bere keys in zahteva natanko en vnos.

Rešitev: berite active. Ta pove, za katero vrstico gre – ne glede na to, koliko vrstic je označenih.

• 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