×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

Ako zobraziť pole formulára v dgride (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");
});
});
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");
});
});
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.
Dojo,programovanie,JavaScript,dgrid,dgrid/editor
Ž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