Datatable JSF et SelectOneMenu Dépendants

Version imprimable

Bonjour,

Je souhaiterai réaliser une datatable contenant 3 colonne
Une colonne de texte
Une colonne avec une liste de catégorie (SelectOneMenu)
Une colonne avec une liste de sous catégorie

Une catégorie contient 0..n sous catégories

Évidement, chaque catégorie ne contient pas les même sous catégories.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<rich:column>
	<f:facet name="header">Aide</f:facet>
	<h:outputText value="#{typeAideFin.libelle}"></h:outputText>
</rich:column>
<rich:column>
	<f:facet name="header">Catégorie</f:facet>
	<h:selectOneMenu id="comboCateg" value="#{typeAideFin.sousCategorie.categorie.code}" valueChangeListener="#{controller.updateListeSousCateg}">
		<f:selectItems  value="#{controller.listeCategorieUI}"></f:selectItems>
		<a4j:support event="onchange" reRender="sousCateg">
		</a4j:support>
	</h:selectOneMenu>
</rich:column>
<rich:column id="sousCateg">
	<f:facet name="header">Sous-Catégorie</f:facet>
	<h:selectOneMenu value="#{typeAideFin.sousCategorie.code}" id="comboSousCateg" valueChangeListener="#{controller.updateSousCateg}">
		<f:selectItems id="listeSousCategorieUI" value="#{controller.listeSousCategorieUI}"></f:selectItems>
		<a4j:support event="onchange">
		</a4j:support>
	</h:selectOneMenu>
</rich:column>

Puis

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
private ArrayList<SelectItem> listeCategorieUI;
 
private ArrayList<SelectItem> listeSousCategorieUI;
...
...
public void updateListeSousCateg(ValueChangeEvent evt){
 
	System.out.println("Mise à jour");
 
	//Remplissage de la liste des sous catégories
	this.listeSousCategorieUI.clear();
	//On rajoute quand même une possibilité de sélectionner l'option aucun  
	this.listeSousCategorieUI.add(new SelectItem(-1, "Aucun"));
 
	for (SousCategorie sousCateg : this.service.getAllSousCategorieByCategorie(evt.getNewValue().toString())){
	        this.listeSousCategorieUI.add(new SelectItem(sousCateg.getCode(), sousCateg.getLibelle()));
        }
}

Comment peut-on faire pour initialiser tout ça ? je tourne en rond depuis trois jours...

24/03/2009, 12h36
tboibes

Salut,
si je comprends tu souhaites faire afficher tes sous-catégories en fonction de la catégorie choisie ?
si oui alors il te faut juste un petit rafraichissement Ajax sur ton composant de liste de sous-catégorie. Ce traitement Ajax doit être appelé à chaque fois que ta sélection de catégorie change.

Apparemment tu utilises RichFaces. Je ne connais pas ce framework mais bon c'est toujours pareil : il faut rajouter un comportement Ajax sur le onchange de ta liste "comboCateg" qui fasse un reRender sur la liste "comboSousCateg". Ton valueChangeListener ne doit que recalculer la liste des sous-catégories, c'est l'Ajax qui demande la rafraichissement de la listeBox sur cette nouvelle liste.

J'espère que ça t'aidera.

Bonjour,

Oui c'est exactement ça. Le souci c'est que toute les valeur sont préchargés dans ma datatable. Il faut donc que toute mes combobox s'initialisent correctement avec les bonnes valeur.

J'ai trouvé une solution, je la laisse ici au cas ou quelqu'un passe par la, soit pour la réutiliser mais elle est crade, soit pour l'améliorer et dans ce cas en fera profiter les autres :D
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <rich:dataTable binding="#{controller.dataTable}" value="#{controller.allTypeAideFinanciere}" var="typeAideFin"> <f:facet name="header">Aide</f:facet> <h:outputText value="#{typeAideFin.libelle}"></h:outputText> </rich:column> <rich:column> <f:facet name="header">Catégorie</f:facet> <h:selectOneMenu id="comboCateg" value="#{typeAideFin.sousCategorie.categorie.code}" valueChangeListener="#{controller.updateListeSousCateg}"> <f:selectItems value="#{controller.listeCategorieUI}"></f:selectItems> <a4j:support event="onchange" reRender="sousCateg"> </a4j:support> </h:selectOneMenu> </rich:column> <rich:column id="sousCateg"> <f:facet name="header">Sous-Catégorie </f:facet> <h:selectOneMenu value="#{typeAideFin.sousCategorie.code}" id="comboSousCateg"> <f:selectItems id="listeSousCategorieUI" value="#{controller.listeSousCategorieUI[typeAideFin.code]}"></f:selectItems> </h:selectOneMenu> </rich:column> </rich:dataTable>
Je suis donc partit du principe que chaque ligne de la table a un identifiant typeAideFin.code.

La première colonne de combobox est pas compliquée a remplir, elle ont toutes les même valeurs.
Pour la sedonde, j'ai crée une hashtable d'Arraylist de SelectItem. Ainsi, je suis capable de remplir correctement ma combobox grace à
Code:

1 2 3 4 5 private Map<Integer,ArrayList<SelectItem>> listeSousCategorieUI; value="#{controller.listeSousCategorieUI[typeAideFin.code]
Évidemment, il y a derière, le backing bean qui m'a créé ma hashtable, ainsi que les arraylist de selectItem qui y sont inclu.