Spoznávame Dojo dgrid - časť 3

Permalink: http://how-to.mldgroup.com/index.php?article=spoznavame-dojo-dgrid-cast-3

7.5.2013 (aktualizované 4.6.2013), Matej LednárKategória: Dojo

V tejto krátkej časti nadviažem na minulý diel, konkrétne na vkladanie dát do gridu. Dáta je možné definovať buď pri volaní constructora alebo aj neskôr po vytvorení inštancie (objektu). Dnešný diel je venovaný druhému spôsobu vkladania dát.

Prvou zmenou oproti príkladu v predchádzajúcej časti je odstránenie vlastnosti store z volania constructora.

Príklad: Volanie constructora bez vlastnosti store.

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

Druhou zmenou je použitie metódy set(), prostredníctvom ktorej definujeme vlastnosť, ktorú chceme v gride zmeniť spolu aj s jej hodnotou. Prvým argumentom metódy set() je názov vlastnosti a druhým jej hodnota. V našom prípade chcem definovať dáta vlastnosti store. Hodnota vlastnosti má rovnaký zápis ako keby bola zapísaná v argumente constructora.

Príklad: Vloženie dát do gridu.

1
Dgrid.set("store", new Memory({data : data}));
Dgrid.set("store", new Memory({data : data}));

Touto jednoduchou zmenou sa docieli dodatočné vloženie dát do gridu.

Príklad: Celý programový kód v JavaScripte.

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
28
<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
            }, "dgrid");
 
              Dgrid.set("store", new Memory({data : data}));
 
          });
        });
</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
            }, "dgrid");
 
              Dgrid.set("store", new Memory({data : data}));
 
          });
        });
</script>

Záver

V ďalšej časti bude predstavený príklad pre riadenie gridu v režime read-only. Vytvoríme jednoduché funkcie s názvami update(), filter() a reset() pre manipuláciu s dátami.

Spoznávame Dojo dgrid - časť 3

Záver

Komentáre

Pridať komentár