Blog webdeveloperski Patryk yarpo Jar

dojox.grid.DataGrid z polami checkbox tylko do odczytu

Autor wiadomości Luty 26, 2012

Widget dataGrid z biblioteki rozszerzeń dojox pozwala na bardzo proste umieszczenie w komórce listy wyboru lub checkboksa. Wymaga to jednak zaznaczenia opcji `editable="true"'. Czy nie da się zatem umieścić w datagridzie takich pól, bez pozwala na ich edycję? Da się. I właśnie o tym będzie ten wpis.

Zapoznanie z dojox.grid.DataGrid

Dla osób, które nie do końca wiedzą, czy jest datagrid, zajrzyj do demo online.

DataGrid programistycznie

Choć istnieje deklaratywny sposób tworzenia dojox.grid.DataGrid, ja wykorzystam programistyczny.

    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");

    dojo.ready(function(){
        var store = new dojo.data.ItemFileWriteStore({
         data : {
            identifier: 'id',
                items: [
                    { id: 1, name: "Zdzisław", busy: true},
                    { id: 2, name: "Mietek", busy: true},
                    { id: 3, name: "Franek", busy: true},
                    { id: 4, name: "Zdzisław", busy: true}
                ]
            }
        }),
        grid = new dojox.grid.DataGrid({
            id: 'grid',
            store: store,
            structure: [
                {'name': 'ID', 'field': 'id', 'width': '150px'},
                {'name': 'Imię', 'field': 'name', 'width': '100px'},
                {'name': 'Zajęty', 'field': 'busy', 'width': '200px'}
            ],
            rowSelector: '20px'},
            'gridDomNode');
        grid.startup();
    });

demo online

Jak widać na załączonym demo, w kolumnie "Zajęty" widzimy jedynie napis "true" albo "false". Skoro są tylko dwie możliwe wartości, to warto wykorzystać checkbox.

dojox.grid.cells.Bool

Dojoksowy datagrid posiada specjalny parametr `cellType'. Jeśli zostanie ustawiony na "dojox.grid.cells.Bool" oraz ustawimy `editable=true', zamiast napisów uzyskamy upragnionego checkboksa:

dojo.ready(function(){

        var store = new dojo.data.ItemFileWriteStore({
         data : {
            identifier: 'id',
                items: [
                    { id: 1, name: "Zdzisław", busy: true},
                    { id: 2, name: "Mietek", busy: true},
                    { id: 3, name: "Franek", busy: false},
                    { id: 4, name: "Wiesiek", busy: true}
                ]
            }
        }),
        grid = new dojox.grid.DataGrid({
            store: store,
            structure: [
                {name: "ID", field: "id", width: "150px"},
                {name: "Imię", field: "name", width: "100px"},
                {name: "Zajęty", field: "busy", width: "200px", cellType: dojox.grid.cells.Bool, editable : true}
            ],
            rowSelector: '20px'},
            'gridDomNode');
        grid.startup();
    });

demo online

Problem: da się zmieniać jego wartość (editable), a przecież czasem chcemy jedynie zaprezentować coś na datagridzie, bez możliwości zmian.

ReadOnly checkbox na datagrid

Omawiany widget posiada jeszcze kilka innych ciekawych opcji. Jedną z nich jest `formatter'. Pozawala na podanie funkcji, która zwraca wartość jaka ma być wyświetlona w danej komórce. Wartością tą może być inny widget... Już wiesz, co mam zamiar zrobić? 🙂

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.CheckBox");

dojo.ready(function()
{

    function busyFieldFormatter(v)
    {
        var w = new dijit.form.CheckBox({
            checked : v,
            readOnly : true
        });
        w._destroyOnRemove = true;

        return w;
    }

    var store = new dojo.data.ItemFileWriteStore({
        data : {
            identifier: 'id',
            items: [
                { id: 1, name: "Zdzisław", busy: true},
                { id: 2, name: "Mietek", busy: true},
                { id: 3, name: "Franek", busy: false},
                { id: 4, name: "Wiesiek", busy: true}
            ]
        }
    }),
    grid = new dojox.grid.DataGrid({
        store: store,
        structure: [
            {name: "ID", field: "id", width: "150px"},
            {name: "Imię", field: "name", width: "100px"},
            {name: "Zajęty", field: "busy", width: "200px", formatter : busyFieldFormatter}
        ],
        rowSelector: '20px'},
        'gridDomNode');
    grid.startup();
});

demo online

W definicji struktury kolumny "Zajęty" przekazałem do parametru `formatter' referencję do funkcji tworzącej checkboksa z ustawieniem `readOnly : true'. Warto zwrócić uwagę na dodatkowe ustawienie pola `_destroyOnRemove' tworzonego widgetu (tak radzą na stronach dokumentacji).

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.