Ako použiť v dgride dijit/form/CheckBox

V tomto článku predstavím dva spôsoby, ako použiť na označenie riadka widget dijit/form/CheckBox a zároveň ponechať štandardné správanie dgridu.

Ako prvé je potrebné do layoutu pre vlastnosť columns vložiť stĺpec s checkboxom.

Príklad: Renderovanie dijit/form/CheckBox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    className: "rb-selector",
    field: "selector",
    label: "Selector",
    renderCell: function (object, value, node, options) {
        var cbx = new CheckBox({
            name: "cbx" + object.id,
            onClick : function() {
                var state = this.get("checked");
                this.set("checked", !state);
            }
        });
        cbx.placeAt(node);
    }
}
{
    className: "rb-selector",
    field: "selector",
    label: "Selector",
    renderCell: function (object, value, node, options) {
        var cbx = new CheckBox({
            name: "cbx" + object.id,
            onClick : function() {
                var state = this.get("checked");
                this.set("checked", !state);
            }
        });
        cbx.placeAt(node);
    }
}

Druhým krokom zabezpečíme, aby označovanie a odznačovanie riadkov v dgride fungovalo správne.

Príklad: Implementácia select a deselect.

1
2
3
4
5
6
7
8
9
10
11
12
13
function setCheckbox(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
}
 
grid.on('dgrid-select', function (event) {
    var row = event.rows[0];
    setCheckbox(row, true);
});
grid.on('dgrid-deselect', function (event) {
    var row = event.rows[0];
    setCheckbox(row, false);
});
function setCheckbox(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
}

grid.on('dgrid-select', function (event) {
    var row = event.rows[0];
    setCheckbox(row, true);
});
grid.on('dgrid-deselect', function (event) {
    var row = event.rows[0];
    setCheckbox(row, false);
});

Pre označovanie a odznačovanie riadkov je možné použiť aj nasledujúci skrátený programový kód.

Príklad: Implementácia select a deselect.

1
2
3
4
5
6
7
8
9
function setCheckbox(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
}
 
grid.on('dgrid-select, dgrid-deselect', function (event) {
    var row = event.rows[0];
    setCheckbox(row, event.type === "dgrid-select");
});
function setCheckbox(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
}

grid.on('dgrid-select, dgrid-deselect', function (event) {
    var row = event.rows[0];
    setCheckbox(row, event.type === "dgrid-select");
});

Záver

Ako vidieť implementácia widgetu dijit/form/CheckBox nie je až tak zložitá. Verím, že vám tento článok pomohol.

Ako použiť v dgride dijit/form/CheckBox

Záver

Komentáre

Pridať komentár