Ako zobraziť pole formulára v dgride (Dojo)

Permalink: http://how-to.mldgroup.com/index.php?article=ako-zobrazit-pole-formulara-v-dgride-dojo

14.9.2013, Matej LednárKategória: Dojo

V predchádzajúcom článku boli predstavené spôsoby, ako zapísať rozšírenie (extension / widget) s názvom editor do zásuvného modulu dgrid. Modul editor slúži na vytváranie editovateľných buniek v tabuľke. Jeho súčasťou je aj podpora štyroch natívnych polí formulára. Natívne polia je možné zapísať ktorýmkoľvek zo spôsobov, ktoré boli uvedené v prechádzajúcom článku.

Modul editor podporuje štyri nasledujúce polia formulára: radio button, checkbox, textbox a textarea. Polia ako hodnoty sa zapisujú nasledovne: radio, checkbox, text, textarea. Na rozdiel od dijitov, majú iný dizajn a preto nemusia každému vyhovovať.

Príklad: Aplikovanie poľa typu checkbox 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
28
29
30
require(["dojo/ready", "dojo/_base/declare", "dgrid/OnDemandGrid", 
"dgrid/editor", "dojo/store/Memory", "dojo/parser"],
        function(ready, declare, OnDemandGrid, editor, Memory) {
 
            ready(function() {
 
                var data = [
                    {checkbox: true, item: "Demo line 1"},
                    {checkbox: false, item: "Demo line 2"},
                    {checkbox: true, item: "Demo line 3"}
                ];
 
                var layout = [
                    editor({
                        field: "checkbox",
                        label: "Checkbox",
                        editor: "checkbox"}),
                    {
                        field: "item",
                        label: "Item"
                    }
                ];
 
                var GridMixin = declare([OnDemandGrid]);
                var dgrid = new GridMixin({
                    columns: layout,
                    store: new Memory({data: data})
                }, "dgrid");
            });
        });
require(["dojo/ready", "dojo/_base/declare", "dgrid/OnDemandGrid", 
"dgrid/editor", "dojo/store/Memory", "dojo/parser"],
        function(ready, declare, OnDemandGrid, editor, Memory) {

            ready(function() {

                var data = [
                    {checkbox: true, item: "Demo line 1"},
                    {checkbox: false, item: "Demo line 2"},
                    {checkbox: true, item: "Demo line 3"}
                ];

                var layout = [
                    editor({
                        field: "checkbox",
                        label: "Checkbox",
                        editor: "checkbox"}),
                    {
                        field: "item",
                        label: "Item"
                    }
                ];

                var GridMixin = declare([OnDemandGrid]);
                var dgrid = new GridMixin({
                    columns: layout,
                    store: new Memory({data: data})
                }, "dgrid");
            });
        });

Pri poliach text a textarea je vhodné aplikovať zápis editOn: "dblclick". Používateľ tak bude môcť editovať polia až po dvojkliku na bunku v tabuľke.

Príklad: Editovanie poľa typu textbox na dvojklik.

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
29
require(["dojo/ready", "dojo/_base/declare", "dgrid/OnDemandGrid",
  "dgrid/editor", "dojo/store/Memory", "dojo/parser"],
     function(ready, declare, OnDemandGrid, editor, 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"},
                    editor({
                        field: "item",
                        label: "Item",
                        editor: "text",
                        editOn: "dblclick"
                    })
                ];
 
                var GridMixin = declare([OnDemandGrid]);
                var dgrid = new GridMixin({
                    columns: layout,
                    store: new Memory({data: data})
                }, "dgrid");
            });
        });
require(["dojo/ready", "dojo/_base/declare", "dgrid/OnDemandGrid",
  "dgrid/editor", "dojo/store/Memory", "dojo/parser"],
     function(ready, declare, OnDemandGrid, editor, 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"},
                    editor({
                        field: "item",
                        label: "Item",
                        editor: "text",
                        editOn: "dblclick"
                    })
                ];

                var GridMixin = declare([OnDemandGrid]);
                var dgrid = new GridMixin({
                    columns: layout,
                    store: new Memory({data: data})
                }, "dgrid");
            });
        });

V tabuľke je možné editovať druhý stĺpec prostredníctvom ľavého dvojkliku na myši. Predíde sa tak nechceným zmenám polí v tabuľke.

Záver

V nasledujúcom článku bude predstavený spôsob zápisu dijitov do polí formulára.

Ako zobraziť pole formulára v dgride (Dojo)

Záver

Komentáre

Pridať komentár