CheckBox dans un Datagrid : récupération de l'état à partir d'un jsonStore

**hapalemur** · 11/06/2009, 11h52

Bonjour,
Je dois afficher successivement 2 Datagrids comme présenté en fichier joint dans la capture datagrid2.png ( je n'affiche jamais en même temps les 2 datagrids dans la page ) La structure est identique sauf pour la dernière colonne qui dans un cas contient un button, et dans l'autre cas une CheckBox ( dojox.grid.cells.Bool ).
Tout celà est obtenu à partir du code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="resources/Dojo-1.3.0/dojo/dojo.js">
    </script>
    <style type="text/css">
        @import "resources/Dojo-1.3.0/dijit/themes/nihilo/nihilo.css";
        @import "resources/Dojo-1.3.0/dojox/grid/resources/Grid.css";
        @import "resources/Dojo-1.3.0/dojox/grid/resources/nihiloGrid.css";
 
        .dojoxGrid table {
            margin: 0;
        }
    </style>
    <script type="text/javascript">
djConfig="parseOnLoad: true, isDebug: true";
 
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dojox.grid.cells._base");
 
var jsonStore = new dojo.data.ItemFileWriteStore({
    url: 'jsonvisuels.json'
});
 
function modifBouton() {
    var bouton = '<button onClick=\'console.log("Mon bouton")\'>MODIFIER</button>';
    return bouton;
}
 
function displayVisuels() {
 
    // définition de la structure dans le cas BUTTON:
    var layoutVisuels1 = [
    { field: 'champ1', name: 'ID', width: '30px' },
    { field: 'champ2', name: 'Nom du visuel', width: '200px'},
    { field: 'champ3', name: 'Date création', width: '150px'},
    { field: 'champ4', name: 'Date modif', width: '150px'},
    { field: 'champ5', name: 'Date synchro', width: '150px'},
    { field: 'champ6', name: 'Date fermeture', width: '150px'},
    { field: 'mod', name: 'Modification', width: '100px', formatter: modifBouton}
   ];
 
    // définition de la structure dans le cas CHECKBOX:
    var layoutVisuels2 = [
    { field: 'champ1', name: 'ID', width: '30px' },
    { field: 'champ2', name: 'Nom du visuel', width: '200px'},
    { field: 'champ3', name: 'Date création', width: '150px'},
    { field: 'champ4', name: 'Date modif', width: '150px'},
    { field: 'champ5', name: 'Date synchro', width: '150px'},
    { field: 'champ6', name: 'Date fermeture', width: '150px'},
    { field: 'mod', name: 'Sélection', width: '100px', styles: 'text-align: center;', editable: true, type:dojox.grid.cells.Bool}
   ];
 
    // création d'un grid avec BOUTON:
    var gridVisuels1 = new dojox.grid.DataGrid({
        query: {
            champ1: '*',
            champ2: '*',
            champ3: '*',
            champ4: '*',
            champ5: '*',
            champ6: '*'
        },
        store: jsonStore,
        clientSort: true,
        autoWidth: true,
        rowSelector: '20px',
        structure: layoutVisuels1
    }, document.createElement('div'));
 
    // création d'un grid avec CHECKBOX:
    var gridVisuels2 = new dojox.grid.DataGrid({
        query: {
            champ1: '*',
            champ2: '*',
            champ3: '*',
            champ4: '*',
            champ5: '*',
            champ6: '*'
        },
        store: jsonStore,
        clientSort: true,
        autoWidth: true,
        rowSelector: '20px',
        structure: layoutVisuels2
    }, document.createElement('div'));
 
    dojo.byId("listeVisuels").appendChild(gridVisuels1.domNode);
    gridVisuels1.startup();
    dojo.byId("listeVisuelsbis").appendChild(gridVisuels2.domNode);
    gridVisuels2.startup();
    }
 
    dojo.addOnLoad(displayVisuels);
    </script>
<head>
 
<body>
    <!-- Affichage des visuels avec bouton -->
    <div class="nihilo" id="listeVisuels" style="width: 1000px; height: 200px;" >
    </div>
    <!-- Affichage des visuels avec checkbox -->
    <div class="nihilo" id="listeVisuelsbis" style="width: 1000px; height: 200px;" >
    </div>
</body>

Je suis en face de 2 Pbs :
1er pb : Celà me génère une duplication du code concernant les variables layoutVisuels et gridVisuels; n'y aurait-il pas une manière plus concise d'écrire cette partie de programme dojo/javascript?
2ème pb : je dois récupérer l'état de la Checkbox à partir d'un jsonStore et malgré de nombreux essais, je n'y parviens pas : Que dois-je rajouter dans la structure du champ 'mod' de layoutVisuels; Dans gridVisuels, le query sur le champ correspondant se fait-il avec '*' ? Dans le jsonStore, que doit-être le champ correspondant : 0/1 ; true/false ; checked/unchecked.
Merci de vos éclairsissements.

**emmanuel.remy** · 11/06/2009, 19h04

Salut:

1er pb : Celà me génère une duplication du code concernant les variables layoutVisuels et gridVisuels; n'y aurait-il pas une manière plus concise d'écrire cette partie de programme dojo/javascript?

Etant donné que tes tableaux sont presque identiques tu peux réutiliser le premier après avoir modifié la dernière colonne. Mais je n'en vois pas trop l'intérêt.

2ème pb : je dois récupérer l'état de la Checkbox à partir d'un jsonStore et malgré de nombreux essais, je n'y parviens pas : Que dois-je rajouter dans la structure du champ 'mod' de layoutVisuels; Dans gridVisuels, le query sur le champ correspondant se fait-il avec '*' ? Dans le jsonStore, que doit-être le champ correspondant : 0/1 ; true/false ; checked/unchecked.

Le fonctionnement des valeurs est identique à celui de la checkbox traditionnelle. Mais utilise dojox.grid.cells.CheckBox parce dojox.grid.cells.Bool est toujours créée CHECKED.

ERE

**hapalemur** · 17/06/2009, 16h39

Bjr,
Désolé de n'avoir pas répondu plus tôt, mais je continuais le développement ( qques questions ne vont pas tarder sur dijit.Tree

)
Mais finalement avec dojox.grid.cells.CheckBox, je n'y suis pas parvenu ( j'suis pas doué

) et après de multiples essais, dont je ne me souviens plus le cheminement, je me suis trouvé avec un fonctionnement correct en utilisant dojox.grid.cells.Bool

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
31
32
33
34
35
 
var jsonStore = new dojo.data.ItemFileWriteStore({
    url: 'jsonvisuels.json'
});
 
function displayVisuelsSelect() {
 
    var layoutVisuels = [
    { field: 'champ1', name: 'ID', width: '30px' },
    { field: 'champ2', name: 'Nom du visuel', width: '200px'},
    { field: 'champ3', name: 'Date création', width: '150px'},
    { field: 'champ4', name: 'Date modif', width: '150px'},
    { field: 'champ5', name: 'Date synchro', width: '150px'},
    { field: 'champ6', name: 'Date fermeture', width: '150px'},
    { field: 'mod', name: 'Sélection', width: '100px', styles: 'text-align: center;', editable: true, type: dojox.grid.cells.Bool}
   ];
 
    // création d'un grid avec CHECKBOX:
    var gridVisuelsS = new dojox.grid.DataGrid({
        query: {
            champ1: '*',
            champ2: '*',
            champ3: '*',
            champ4: '*',
            champ5: '*',
            champ6: '*'
        },
        store: jsonStore,
        clientSort: true,
        autoWidth: true,
        rowSelector: '20px',
        structure: layoutVisuels
    }, document.createElement('div'));
........
}

Donc pas de query sur l'état de la CheckBox, et avec la structure du JsonStore :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
{ identifier: 'champ1',
 'items':[{
    'champ1': '12',
    'champ2': 'Total-v1',
    'champ3': '08/02/2009',
    'champ4': '02/03/2009',
    'champ5': '14/03/2009',
    'champ6': '29/04/2009',
    'mod': true,
},
{
    'champ1': '3',
    'champ2': 'Recta-v1',
    'champ3': '08/02/2009',
    'champ4': '07/03/2009',
    'champ5': '19/03/2009',
    'champ6': '12/05/2009',
    'mod': false,
},
......

**emmanuel.remy** · 17/06/2009, 20h41

Très étonnant que tu n'y sois pas arrivé avec la checkbox, mais bon... le tout c'est d'y arriver quand même et que cela corresponde à ce que tu voulais (mais faudrait quand même investiguer

) !

ERE