Discussion :

[hapalemur]

Bonjour,
De retour pour terminer mon premier développement Dojo + Ajax ( après une longue escapade sur un autre projet ). Les pages s'enchaînent de façon assez fluide, les données sont enregistrées dans la base, affichées dans les pages, celà est moins laborieux qu'au début sous réserve de procéder de manière basique.
Dans le cas présent, j'ai plusieurs pages avec une structure assez similaire qui doivent afficher des listes d'éléménts dans un Datagrid, après avoir factorisé tout çà, j'obtiens les éléments suivants :

• un datagrid
  

  Code :

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

  1
  2
  3
  4
  5
  6
  7
      datagrid = new dojox.grid.DataGrid({
          query: {id: '*'},
          clientSort: true,
          autoWidth: true,
          rowSelector: '20px',
          structure: layoutListe
      });

• un layout de liste spécifique à chaque page
• un jsonStoreGrid
  pour alimenter le grid ( tous les champs du store ne sont pas obligatoirement affichés : affichage sous la dépendance de la structure du Layout ).

Et au chargement de la page, j'ai une requête Ajax sur le serveur qui permet de récupérer les données du jsonStoreGrid :

Code :

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

1
2
3
4
5
6
load: function(data) {
....
     jsonStoreGrid = new dojo.data.ItemFileReadStore({url: data.url, clearOnClose: true});
     jsonStoreGrid.fetch();
     datagrid.setStore(jsonStoreGrid);
......

Celà pour l'aspect statique qui fonctionne sans problème.
Pour permettre à l'utilisateur d'effectuer des tris sur l'affichage des lignes du Datagrid, j'introduis une ComboBox afin de choisir le type de sélection ( cette ComboBox est alimentée par un store (jsonSelection) qui reprend toutes les valeurs possibles d'un champ du jsonStoreGrid ).

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
function boiteselection(str){ // str : code de la page dans laquelle est instanciée la Combobox
    boxselection = new dijit.form.ComboBox({
                onChange: groupselection,
                value: "",
                store: jsonSelection,
                searchAttr: "nom"}, document.createElement('div'));
    boxselection.codepage = str;
 
function groupselection(){
    var vquery;
    switch (boxselection.codepage) {
        case 'codepage1': vquery = {groupe:boxselection.attr('value')}; 
                  // groupe : nom du champ du jsonStoreGrid sur lequel on veut effectuer la sélection
                break;
        case 'codepage2': vquery = {element:boxselection.attr('value')};
                  // element : nom du champ du jsonStoreGrid sur lequel on veut effectuer la sélection
                break;
        ......
    }
    jsonListe.fetch( {query:vquery,
                onComplete: function(items, resultat){
                	jsonListe.close();
                	jsonListe = new dojo.data.ItemFileReadStore({data: {items:items}, clearOnClose: true});
                	datagrid.setStore(jsonListe);
                }
    });
}

Celà aussi fonctionne sur le principe, mais 2 questions :

1. N'y a t'il pas plus simple?
2. C'est du type 'one shot' :
   Après la première requête, j'ai perdu le store d'origine, si bien que celà m'oblige à faire une requête sur le serveur pour récupérer le store initial?

[emmanuel.remy]

Salut,

pour permettre à l'utilisateur d'effectuer des tris sur l'affichage des lignes du Datagrid

Trier ou filtrer ? J'ai l'impression que tu filtres plus que tu ne tries mais ce n'est pas très clair.

ERE

[hapalemur]

Hello,
Effectivement, le terme est plutôt mal choisi, puiqu'il s'agit de faire un filtre sur l'affichage du Datagrid.
Pour situer mon besoin : j'ai le layoutListe

Code :

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

layoutListe = [{ field: 'id',..},{ field: 'nom',..},{ field: 'datcre',...},{ field: 'nbapps', ...}];

Le champ groupe pour cette page, n'apparaît pas dans le layout.
et pour le jsonStoreGrid :

Code :

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

1
2
3
4
5
6
{'id': '3','nom': 'sarl-1','datcre': '05/12/2009','nbapps': '3','groupe':'Commerces'},
{'id': '1','nom': 'sarl-2','datcre': '08/12/2009','nbapps': '2','groupe':'Services'},
{'id': '4','nom': 'sarl-3','datcre': '08/01/2010','nbapps': '1','groupe':'High-Tech'},
{'id': '5','nom': 'demo-1','datcre': '18/12/2009','nbapps': '4','groupe':'Services'},
{'id': '7','nom': 'demo-2','datcre': '08/11/2009','nbapps': '3','groupe':'Commerces'},
{'id': '8','nom': 'demo-3','datcre': '05/12/2009','nbapps': '3','groupe':'Services'},

Dans la ComboBox, j'ai les éléments (Commerces, Services, High-Tech), et lors de la sélection par l'utilisateur de l'item "Services", je ne veux voir affiché dans le Datagrid que les items qui font partie du groupe "Services".
Je crois qu'on peut appliquer une fonction de filtrage sur un Datagrid, mais encore faut-il que le champ existe

[emmanuel.remy]

Je crois qu'on peut appliquer une fonction de filtrage sur un Datagrid, mais encore faut-il que le champ existe

Je ne crois pas que le champ doive obligatoirement exister puisqu'en interne le Datagrid ne fait que manipuler le store.

Code :

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

1
2
 
datagrid.filter(query);

Tout simplement

ERE

[hapalemur]

Effectivement ... tout simplement :

datagrid.filter(query);

parfois je me complique les choses.
Merci.

Merci également pour l'excellent tuto sur l'API Dojo Data : de la saine lecture pour un week-end qui s'annonce pluvieux.