Discussion :

[VinceCBA]

Bonjour à tous,
J'ai actuellement un tableau (HTML) contenant une liste de clients (qui peut donc être assez grand ), et je désirerais placer un "filtre" juste au dessus de ce tableau pour n'afficher que les résultats souhaités.

Je m'explique :
Admettons que j'ai un tableau contenant la liste de clients suivante :
- ALFRED
- BERNARD
- MICHEL
- MICKAEL
j'ai donc un tableau avec 4 lignes.
J'aimerais que dès que je commence à taper la lettre "M" par exemple, je n'ai plus qu'un tableau à 2 lignes contenant "MICHEL" et "MICKAEL".

Voici mon code actuel :
Mon FilteringSelect :

Code :

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

1
2
3
4
5
6
<s:select
            list="clientsList"
            listValue="%{nom + ' '+prenom}"
            data-dojo-type="dijit.form.FilteringSelect"
            data-dojo-props="fetchProperties:{sort:[{attribute: 'nom', ascending: true}]}"
            />

Mon tableau contenant ma liste :

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
<table class="tableList">
            <thead>
                <tr>
                    <th class="tableId">ID</th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th class="tableActions" colspan="2"> 
                        <s:a href="add">
                            <img class="edit" src="<%=Constantes.REP_IMG%>/btn_td_add.png" title="Créer un nouveau patient" />
                        </s:a>
                    </th>
                </tr>
            </thead>
            <s:iterator value="clientsList">
                <tr>
                    <td class="tdValId"><s:property value="id" /></td>
                    <td><s:property value="nom" /></td>
                    <td><s:property value="prenom" /></td>
                    <td class="tdActions">
                        <s:a href="edit?id=%{id}">
                            <img class="edit" src="<%=Constantes.REP_IMG%>/btn_td_update.png" title="Modifier" />
                        </s:a>
                    </td>
                    <td class="tdActions">
                        <s:a href="client_delete?id=%{id}" onclick="return(confirm('Etes-vous sûr de vouloir supprimer cette entrée?'))">
                            <img class="del" src="<%=Constantes.REP_IMG%>/btn_td_delete.png" title="Supprimer" />
                        </s:a>
                    </td>
                </tr>
            </s:iterator>
        </table>

Je n'ai pas vraiment d'idées sur comment effectuer ceci, toutes aide et idées seront donc les bienvenues

Merci d'avance

[Le Roux B.]

Je pense qu'il faut chercher du côté du dataStore.
Il faut y mettre les données.
On peut effectuer un filtre et "connecter" le dataStore avec un grid.

[VinceCBA]

Bonjour,

On peut effectuer un filtre et "connecter" le dataStore avec un grid.

Pour les grid justement, on est obligé de passer par un fichier (JSON ou autre) ?

[Le Roux B.]

Je ne sais pas ce que tu entends par "fichier".
On peut faire un peu comme on veut.
Cependant, ma petite expérience d'utilisation avec Dojo montre qu'il est préférable d'utiliser dataStore. Au début, j'ai trouvé cela contraignant mais à l'usage, on s'y retrouve plus facilement lorsqu'il y a des modifications à apporter sur le structure du grid par exemple.
DataStore est une interface (au sens Java) générale de manipulation de données dont le filtrage.
Un certain nombre d'implémentation existe :
http://dojotoolkit.org/reference-gui...tml#dojox-data

Peut être, celle ci t'intéressera plus particulièrement
http://dojotoolkit.org/reference-gui...htmltablestore

[VinceCBA]

Au sens de fichier, j'entends un fichier physique (.json, .cvs etc...) comme j'ai vu sur tous les exemples jusqu'a présent.

Ce qui m'intéresserait , c'est de remplir mon tableau directement à partir d'une liste Java (Arraylist ou autre ...), en gardant la logique de Struts 2
Merci pour tes liens, je vais regarder ca

[Daniel_Gibot]

Bonjour,

Il existe un moyen de filtrer rapidement dans un dataGrid. Voici la fonction que j'utilise :

Code :

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

1
2
3
4
5
function filtrer(){
		tableau = dijit.byId('monDataGrid');
		valeur = dijit.byId('monChampsFiltre').get('value');
		tableau.setQuery({colonneDuDataGrid:'*'+valeur+'*'});
}

Je pense que cette façon de faire est adaptable uniquement dans la mesure où il y a un datastore connecté. S'il s'agit d'un tableau HTML "basique" le seul moyen c'est de le rafraichir via un appel ajax... Par contre si c'est un tableStore je pense que c'est réalisable.