×
Vytvárame riešenia

Spoznávame Dojo dgrid - časť 1

Práca s tabuľkami, v programovaní nazývanými gridy, je v podnikových aplikáciách jednou z najčastejšie vykonávaných operácií. Gridy sú upravené tabuľky jazyka HTML, ktoré poskytujú bohatú funkcionalitu pre manipuláciu s dátami. Framework Dojo ponúka dva základné typy gridov: DataGrid a EnhancedGrid. Žiaľ tieto gridy majú viaceré nedostatky a obmedzenia, kvôli ktorým vznikol nový grid s názvom dgrid. Ale ani tento grid nie je ešte dokonalý. Hoci je dgrid zatiaľ len vo verzii beta, už teraz ponúka jednoduché postupy, ako tvoriť zložitejšie gridy.
Pre prácu s dgridom je potrebné mať stiahnuté nasledujúce súčasti:
Tvorba dgridu spočíva z troch základných činností:
  • vytvorenie rozloženia dát v gride (layout)
  • vytvorenie dátovej štruktúry pre layout
  • vytvorenie gridu a definovanie jeho vlastností
V prvej časti seriálu zameraného na dgrid je demonštrované vytvorenie jednoduchého gridu bez storu. Pre dáta dgridu bude použité pole objektov. Objekt bude obsahovať dve vlastnosti: id a item. Každý objekt (prvok poľa) predstavuje dáta pre nový riadok.
Skôr ako sa pustíme do tvorby gridu, je potrebné v markupe (HTML) definovať miesto, kde sa má grid zobraziť. Pre tento účel bude slúžiť nasledujúci zápis.
Príklad: Zápis do elementu <body>.
1
<div id="dgrid"></div>
Po definovaní atribútu id vytvoríme dáta pre grid. Objekt sa skladá z vlastností, ktoré reprezentujú hodnoty vlastnosti field v premennej layout. Hodnoty vlastností objektov v poli data budú zobrazené ako obsah buniek gridu.
Príklad: Vytvorenie dát pre naplnenie gridu.
1
2
3
4
5
var data = [
{id : 1, item : "Demo line 1"},
{id : 2, item : "Demo line 2"},
{id : 3, item : "Demo line 3"}
];
Ďalším krokom je definovanie rozvrhnutia buniek gridu (layout). Podobne ako pri dátach pre grid aj layout tvorí pole objektov. Tentoraz ale každý objekt definuje bunku v riadku. Zložitejšie rozvrhnutia môžu obsahovať aj viacriadkové hlavičky alebo texty v hlavičke, ktoré slúžia ako popis pre iné bunky. Náš layout obsahuje zápis iba jednoriadkovej hlavičky a definovanie gridu s dvoma stĺpcami, keďže obsahuje dva prvky (objekty).
Každý objekt layoutu bude obsahovať dve vlastnosti: field a label. Vlastnosť field definuje vlastnosť z dát, ktorej hodnota sa bude zobrazovať. Pozíciu zobrazenia hodnoty z dát definuje pozícia objektu ako prvku poľa v premennej layout. Prehodením poradia objektov (prvkov poľa) sa mení aj poradie stĺpcov. Vlastnosť label definuje text, ktorý sa zobrazí pre daný stĺpec v hlavičke gridu.
Príklad: Vytvorenie rozvrhnutia buniek v gride.
1
2
3
4
var layout = [
{field : "id", label : "ID"},
{field : "item", label : "ITEM"}
];
Rozvrhnutie buniek v dgride je možné zapísať viacerými spôsobmi. Pre demonštračné účely bude použitý nasledujúci spôsob tvorby layoutu, ktorý sa mi zdá najprehľadnejší. Spôsoby zápisu layoutu sa nachádzajú v dokumentácii dgridu.
Ďalším krokom je vytvorenie gridu. Základný formát vytvorenia dgridu je jednoduchý. Constructor obsahuje len dva argumenty:
  • objekt s nastaveniami gridu
  • id pre umiestnenie gridu
Príklad: Formát zápisu pre vytvorenie dgridu.
1
new Grid({options}, id);
V tomto príklade je definovaný len layout prostredníctvom vlastnosti columns. Podľa druhu layoutu je potrebné definovať príslušnú vlastnosť a modul.
Príklad: Vytvorenie gridu bez definovania dát.
1
2
3
Dgrid = new Grid({
columns : layout
}, "dgrid");
Posledným krokom je vloženie dát do gridu. To sa vykoná cez metódu renderArray() a argumentu data. V prípade, že sa používa store, zápis renderArray() sa nepoužíva.
Príklad: Vloženie dát do gridu
1
Dgrid.renderArray(data);
A na záver je uvedený kompletný programový kód, ktorý stačí umiestniť do elementu <body> v šablóne pre Dojo.
Príklad: Celý kód.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="dgrid"></div>
<script>
require(["dojo/ready", "dgrid/Grid"], function(ready, Grid) {
ready(function() {
var data = [
{id : 1, item : "Demo line 1"},
{id : 2, item : "Demo line 2"},
{id : 3, item : "Demo line 3"}
];
var layout = [
{field : "id", label : "ID"},
{field : "item", label : "ITEM"}
];
var Dgrid = new Grid({
columns : layout
}, "dgrid");
Dgrid.renderArray(data);
});
});
</script>
V tomto príklad bol použitý modul dgrid/Grid. Pri zložitejších gridoch sa namiesto modulu dgrid/Grid používa modul dgrid/OnDemandGrid.

Záver

Ďalšie časti budú venované na prácu so storom, štýlovanie gridu a ukážku práce s pluginmi.


Dojo,programovanie,dojo,JavaScript,grid,dgrid,dgrid/Grid
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších