Jak na APEX 11:  Vyplňování tabulky jako v Excelu, sumační řádky, úpravy vzhledu s CSS

Jeden takový grid vytvořím a ukáži vám, co všechno se v něm dá dělat. Data použiji z tabulky Employee, kterou jsme vytvářeli již dříve. Grid udělám na straně Employee v aplikaci Zaměstnanci.



Abyste  mohli grid upravovat je potřeba ho nejprve nastavit na enabled.



Nyní skryjeme sloupce s ID a nastavíme jejich jednotlivé typy. Toto nastavení nám usnadní práci, nebudeme muset vyplňovat datum jako text a vypisovat název departmentu.



Jak můžete vidět, momentálně je poslední sloupec umístěn mimo obrazovku. Na normálním monitoru by pravděpodobně bylo vše v pořádku, ale vždy je ideální mít aplikaci upravenou i pro menší zařízení. Proto si ukážeme, jak nastavit sloupce tak, aby se správně zobrazovaly na všech zařízeních.

Je to opravdu jednoduché, jediné co musíte udělat je nastavit sloupcům minimální šířku. Pokud ji nastavíte, sloupce se budou přizpůsobovat obsahu, ale vždy jen v rámci obrazovky. Vše samozřejmě záleží na šířce obrazovky na které obsah zobrazujete. Pokud například nastavíte všechny sloupce na 500, tak se na jednu obrazovku nevejdou. V praxi nastavuji sloupce na šířku názvu, a pokud potřebují více místa, samy se přizpůsobí.

Další super vychytávkou gridu, je agregace. Agregaci si udělám pro jednotlivé Departmenty.



Nyní nastavíme, jak se mají záznamy řadit.



Následující krok je nastavení sumačního řádku. Díky němu se dozvíte, kolik dohromady stojí všechny výplaty pro vybrané oddělení.

Jak můžete vidět, současné nastavení je šedé a poněkud nepřehledné. To ale můžeme snadno změnit pomocí CSS. S nastavením stylů si můžete pohrát, můžete je nastavit jak pro jednotlivé sloupce, tak pro jednotlivé komponenty gridu, jako je například sumační řádek. Všechny komponenty lze prozkoumat pravým kliknutím myši. Obsahují různé třídy, podle kterých je můžete měnit dle libosti.

Nyní vytvořím jednu třídu pro zabarvení sloupce a pak použiji další dvě, které jsem zkopíroval z prozkoumaných elementů. První je z headeru pro agregaci přes department a druhá je ze sumačního řádku.

Classy mohu napsat do CSS inline pole v atributách dané strany.

Zkopíroval jsem si název třídy coloredcolumn, přidám ji do atribut sloupce, který chci zabarvit. Bude to salary.



Na dalších obrázcích vidíme, jak vypadal region před úpravou a jak vypadá po úpravě.




Tyto úpravy mi zabraly pár minut a udělají velký rozdíl v prezentaci dat a v jejich přehlednosti. Ještě si nastavíme formát salary a contract to.

Takto vytvořený grid, umí ukládat změny v každém řádku. Mimo to umí také vytvořit a i mazat řádky. Bez jakéhokoliv psaní kódu. Respektuje všechny klíče a pravidla unikátnosti, která použitá tabulka má.

Co když ale potřebujete něco trochu složitějšího, například zobrazovat view ze tří odlišných tabulek, editovat ho jako excel a data ukládat do všech sloupců, všech tří tabulek. V takovém případě nastavíme proceduru, kterou budete volat tlačítkem save. Na tuto funkci už budete potřebovat základy SQL, ale stále to není žádný programátorský oříšek a měli byste to hravě zvládnout jen se základní znalostí. Na tuto problematiku se zaměřím v jednom ze svých dalších článků.