j-DataGrid - Total.js part 1
j-DataGrid je súčasťou client-side knižnice jComponent od Total.js. Viac informácií o tomto komponente môžete nájsť na webe componentator.com alebo v GitHub repozitári.
j-DataGrid je komponent, ktorý dokáže zobraziť veľké množstvo štrukturovaných dát na webovej stránke s množstvom doplňujúcich funkcií. Tieto dáta sú zobrazené v tabuľke spolu s hlavičkou, kde je možné bezproblémov vylistovať viac než 30 000 riadkov. Podporuje triedenie dát, filtrovanie, označovanie riadkov, úpravu veľkosti stĺpcov, vertikálne a horizontálne scrollovanie s vlastnými scrollbarmi nezávyslími na operačnom systéme, podporuje "Drag & drop" stĺpcov, tmavý režim a je responzívny. To z neho robí komplexný a veľmi všestranný komponent, ktorý je použiteľný v priebehú pár chvíľ.
j-DataGrid je veľmi komplexný komponent a je ťažké obsiahnuť všetky jeho možnosti v jednom blogu, preto ho rozdelím do dvoch častí. V prvej časti sa budeme venovať rôznym dátovým typom pre stĺpce. V druhej časti sa budeme venovať ďalším funkciám, ako je ovládací panel, používanie zaškrtávacích políčok a ako môžeme spracovať udalosti kliknutia na riadok.
Ako používať j-DataGrid
Ako prvé je potrebné vedieť ako pracovať s knižnicou jComponent. Podrobnejšie som sa tomu venoval v predchádzajúcom blogu, pre viac informácií si ho odporúčam prečítať.
Použitie tohto komponentu sa mierne líši od použitia predchádzajúcich komponentov, pretože teraz budeme používať script vnútri nášho ui-component HTML elementu. V tomto scripte si budeme definovať, ktoré stĺpce chceme zobraziť, ako budú vyzerať a tiež im môžeme pridať rôzne funkcie. (Dáta, ktoré budeme používať musia obsahovať stĺpce, ktoré chceme zobraziť)
Inicializácia
Pri inicializácií tohto komponentu začíname použitím HTML tagu ui-component rovnako ako v predchádzajúcich komponentoch. Tento krok zostáva nezmenený a používame atribúty name, path a config. Do konfigurácie vkladáme nastavenia pre komponent ako celok.
Ďalší krok je pridanie tagu script do vnútra komponentu. Tento script tag musí obsahovať atribút type s hodnotou text/plain. Do vnútra scriptu vkladáme dáta v tvare pola objektov, kde každý objekt reprezentuje jeden stĺpec v tabuľke. Každý objekt má vlastnosti ako name (názov vlastnosti, ktorá bude zobrazená v tomto stĺpci), text (meno stĺpca v hlavičke tabuľky) a viaceré voliteľné vlastnosti. S týmito nastaveniami vieme ovplyvniť rôzne funkcie pre každý stĺpec samostatne.
Príklad:
Prosím, berte na vedomie, že toto je len jednoduchá ukážka a tento komponent obsahuje viac možností než je obsiahnutých v tomto blogu.
<ui-component name="datagrid" path="?.items" config="margin:22">
<script type="text/plain">
[
{ name: 'name', text: 'Name', width: 200 },
{ name: 'age', text: 'Age', type: 'number' },
{ name: 'phone', text: 'Phone', type: 'phone' },
{ name: 'email', text: 'Email', type: 'email' },
{ name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false },
]
</script>
</ui-component>
Ako môžeme vidieť v príklade vyššie, tak chceme použiť komponent DataGrid a tento komponent bude čítať dáta z cesty ?.items (o použití ciest som písal v jednom z predchádzajúcich blogov, ak ste tu nový, odporúčam vám prečítať si najprv tento blog). V konfigurácií sme použili len margin s hodnotou 22, čím sme upravili výšku zobrazenej tabuľky.
Ako ste si určite všimli, tak už sme použili aj spomínaný script. V tomto príklade sme použili pár základných typov dát, na ktorých si ukážeme ako s nimi pracovať. Zvolili sme si string, number, phone, email, boolean a jednu z možností ako zobraziť dátový typ date. V niektorých z nich sme použili doplňujúce vlastnosti, ktoré si postupne vysvetlíme.
Na našej stránke už môžeme vidieť prázdny komponent j-DataGrid.
Pre náš príklad si vytvoríme dáta, ktoré uložíme na cestu ?.items.
var arr = [];
arr.push({ id: '1', name: 'Palo', age: 26, phone: '+421123456789', email: 'palo@totaljs.com', online: true, created: NOW });
arr.push({ id: '2', name: 'Peťo', age: 40, phone: '+421123456789', email: 'peto@test.com', online: false, created: NOW.add('-1 day') });
arr.push({ id: '3', name: 'Dodo', age: 34, phone: '+421123456789', email: 'dodo@test.com', online: true, created: NOW.add('-2 day') });
arr.push({ id: '4', name: 'Marek', age: 32, phone: '+421123456789', email: 'marek@test.com', online: false, created: NOW.add('-3 day') });
arr.push({ id: '5', name: 'Louis', age: 25, phone: '+421123456789', email: 'louis@test.com', online: true, created: NOW.add('-4 day') });
exports.set('items', arr);
Tento kód sa nachádza v javascript PLUGINe a ako môžeme vidieť, tak je vo forme poľa objektov. Každý objekt obsahuje vlastnosti id, name, age, phone, email, online a created, ktoré sú vytvorené presne pre hodnoty, ktoré sme si definovali pri vytváraní nášho kompoentu j-DataGrid v script tagu.
Po pridaní tohto kódu môžeme vidieť, že dáta sa zobrazujú už aj na webovej stránke.
Teraz, keď máme pripravený náš príklad môžeme pokračovať s ukážkou možností jednotlivých stĺpcov.
Dátový typ string
Použitý kód:
{ name: 'name', text: 'Name', width: 200 }
Takto definovaný stĺpec v deklarácií komponentu znamená, že v tomto stĺpci budú zobrazené hodnoty z vlastnosti name, ktorú obsahujú naše dáta. V hlavičke stĺpca bude text Name a šírka stĺpca bude 200 pixelov (predvolená hodnota je 150 pixelov). Dátový typ nemusíme definovať, keďže string je predvolená hodnota.
V tomto stĺpci môžeme filtrovať v dátach vložením hodnoty do poľa filter pod hlavičkou nášho stĺpca.
Dátový typ number
Použitý kód:
{ name: 'age', text: 'Age', type: 'number' }
Takto definovaný stĺpec v deklarácií komponentu znamená, že v tomto stĺpci budú zobrazené hodnoty z vlastnosti age, ktorú obsahujú naše dáta. V hlavičke stĺpca bude text Age a dátový typ pre tento stĺpec bude number.
Možno ste si už v príklade všimli, že stĺpec s dátovým typom number je automaticky zarovnaný na pravú stranu bunky. Je to tak kvôli jednoduchšej orientácií v číslach, ale ak by ste sa rozhodli, že vám vyhovuje iné zarovnanie, môžete to jednoducho zmeniť pridaním vlastnosti align.
Filtrovanie v tomto stĺpci je podobné ako v stĺpci s dátovým typo string, ale tu môžeme navyše filtrovať v určitom rozsahu (napríklad 26 - 32 - medzi číslami a pomlčkou musí byť medzera).
Dátový typ phone
Použitý kód:
{ name: 'phone', text: 'Phone', type: 'phone' }
Takto definovaný stĺpec v deklarácií komponentu znamená, že v tomto stĺpci budú zobrazené hodnoty z vlastnosti phone, ktorú obsahujú naše dáta. V hlavičke stĺpca bude text Phone a dátový typ pre tento stĺpec bude phone.
V príklade si môžeme všimnúť, že v tomto stĺpci sa nám objavila ikona telefónu pred každým číslom. Taktiež sa objaví podčiarknutie, keď prejdeme kurzorom nad nejaké číslo. V prípade, že na niektoré z čísiel klikneme, tak sa spustí automaticky funkcia, ktorá zavolá na dané číslo.
Filtrovanie v tomto stĺpci funguje rovnako ako pri stĺpci s dátovým typom string.
Dátový typ email
Použitý kód:
{ name: 'email', text: 'Email', type: 'email' }
Takto definovaný stĺpec v deklarácií komponentu znamená, že v tomto stĺpci budú zobrazené hodnoty z vlastnosti email, ktorú obsahujú naše dáta. V hlavičke stĺpca bude text Email a dátový typ pre tento stĺpec bude email.
V tomto prípade je určitá podobnosť medzi dátovým typom email a dátovým typom phone. Keď presunieme kurzor nad niektorý email, tak sa nám objaví podčiarknutie, no rozdiel je v tom, že pridaná ikona je v tomto prípade list a po kliknutí na email sme automaticky presmerovaný na emailovú službu, v ktorej sa nám predvyplní adresát pre našu správu.
Filtrovanie v tomto stĺpci funguje rovnako ako pri stĺpci s dátovým typom string.
Dátový typ boolean
Použitý kód:
{ name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] }
Takto definovaný stĺpec v deklarácií komponentu znamená, že v tomto stĺpci budú zobrazené hodnoty z vlastnosti online, ktorú obsahujú naše dáta. V hlavičke stĺpca bude text Online a dátový typ pre tento stĺpec bude boolean.
Môžeme si tu všimnúť taktiež novú vlastnosť options, ktorá nám pridá možnosti na výber v poli pre filtrovanie. Vidíme tu pole s dvoma objektmi. Každý z nich obsahuje vlastnosť name a id. Vo vlastnosti id môžeme vidieť hodnoty true a false a vo vlastnosti name máme hodnoty Yes a No. Hodnoty true a false reprezentujú hodnoty v tomto stĺpci a hodnoty Yes a No budú zobrazené v našom filtri.
Boolean hodnoty sú v datagride zobrazené ako zaškrtávacie polia, kde zaškrtnuté políčko reprezentuje hodnotu true a nezaškrtnuté políčko reprezentuje hodnotu false.
Pre filtrovanie v tomto stĺpci musíme do nášho príkladu vložiť taktiež komponent j-Directory (o tomto komponente sa môžete dozvedieť viac v tomto blogu). Po kliknutí na filter sa zobrazí komponent j-Directory a užívateľ si môže vybrať ľubovoľnú možnosť pre filtrovanie.
Dátový typ date - improvizovaný
Použitý kód:
{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }
V komponente j-DataGrid je možné použiť aj dátový typ date, ale pre účely príkladu použijeme inú metódu.
Takto definovaný stĺpec v deklarácií komponentu znamená, že v tomto stĺpci budú zobrazené hodnoty z vlastnosti created, ktorú obsahujú naše dáta. V hlavičke stĺpca bude text Created. Dátový typ sme pre tento stĺpec nenastavili a preto bude použitý predvolený dátový typ, čiže string.
Ako si môžeme všimnúť, pribudlo nám tu viacero nových vlastností, prvou z nich je vlastnosť template. Ako už jej názov napovedá, tak obsahuje template na formátovanie dátumu, v tomto prípade chceme, aby bol v danom stĺpci zobrazený dátum vo formáte dd.MM.yyyy. Ďalšími vlastnosťami sú align a alignheader, ktoré slúžia na nastavenie zarovnania zobrazených dát v stĺpci a textu v hlavičke, v tomto prípade zarovnávame vpravo. Poslednou vlastnosťou je filter, kde sme nastavili hodnotu false a tým sme zamedzili možnosť filtrovania v tomto stĺpci.
Dúfam, že ste sa v tomto blogu naučili niečo nové, ale nezabúdajte, že to bol len príklad pár základných možností tohto komponentu a ponúka nám toho oveľa viac.