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:

Dojo Toolkit (http://dojotoolkit.org/)
dgrid (https://github.com/SitePen/dgrid)
xstyle (https://github.com/kriszyp/xstyle)
put-selector (https://github.com/kriszyp/put-selector)

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>
<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"}
    ];
    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"}
    ];
    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);
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");
    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);
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>
<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.

Spoznávame Dojo dgrid - časť 1

Záver

Komentáre

Pridať komentár