Spoznávame Dojo dgrid - časť 2

V prvej časti venovanej Dojo dgrid bol predstavený jednoduchý postup ako rýchlo vytvoriť grid z komponentu Dojo dgrid a demonštrované vloženie dát cez metódu renderArray(). V tejto časti bude predstavený spôsob vloženia dát prostredníctvom vlastnosti store a modulu dojo/store/Memory.

Pre použitie modulu dojo/store/Memory je potrebné nahradiť modul dgrid/Grid za dgrid/OnDemandGrid. Pri práci s modulom dojo/store/Memory už nie je potrebný zápis metódy renderArray(). Metóda je nahradená vlastnosťou store. Pre začiatok stačí v constructore Memory definovať objekt s vlastnosťou data, ktorej bude priradená premenná data reprezentujúca dáta gridu.

Príklad: Pridanie vlastnosti store a Memory storu.

1
2
3
4
var Dgrid = new Grid({
  columns : layout,
  store : new Memory({data : data})
}, "dgrid");
var Dgrid = new Grid({
  columns : layout,
  store : new Memory({data : data})
}, "dgrid");

Týmto jednoduchým postupom sme priradili gridu store, ktorý umožní využívať ďalšie vymoženosti dgridu. Pri práci so stromom v dgride je potrebné do storu pridať metódy mayHaveChildren() a getChildren().

Príklad: Programový kód podporujúci prácu s Memory storom v dgride.

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/OnDemandGrid", "dojo/store/Memory"],
          function(ready, Grid, Memory) {
 
            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,
                store : new Memory({data : data})
              }, "dgrid");
 
            });
          });
</script>
<div id="dgrid"></div>
 
<script>
  require(["dojo/ready", "dgrid/OnDemandGrid", "dojo/store/Memory"],
          function(ready, Grid, Memory) {
 
            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,
                store : new Memory({data : data})
              }, "dgrid");
 
            });
          });
</script>

V ďalších častiach už budú uvádzané len zápisy v jazyku JavaScript bez zápisu <div id="dgrid"></div> a elementu <script>.

Záver

Pri práci s dátami, JSON dáta alebo pole objektov, je vhodné definovať vlastnosť id. V opačnom prípade môže nastať problém s modulom dgrid/Selection a označovaním riadkov.

Spoznávame Dojo dgrid - časť 2

Záver

Komentáre

Pridať komentár