Faire dépendantes multiples / en cascade selectOneMenu listes déroulantes dans JSF

j'essaie de faire 4 menus dépendants.

Lorsque l'utilisateur choisit un élément dans le premier menu, le menu affichera les données dépendantes et quand l'utilisateur choisit l'élément à partir de la deuxième , la troisième présentera des données dépendantes et ainsi de suite.

l'utilisateur ne verra que les éléments du premier menu et les autres seront vides. S'il choisit un élément dans le premier menu, la seconde va afficher les données, mais la troisième et la quatrième restera vide, et ainsi de suite. L'utilisateur doit éventuellement choisir les entrées de tous les 4 menus.

<h:selectOneMenu id="first" value="#{nodes.selectState"}>
    <f:selectItems value="#{nodes.stateList}"/>
    <f:ajax render="second">
</h:selectOneMenu>
<h:selectOneMenu id="second" value="#{nodes.selectCity"}>
    <f:selectItems value="#{nodes.cityList}"/>
    <f:ajax render="third">
</h:selectOneMenu>
<h:selectOneMenu id="third" value="#{nodes.selectRegion"}>
    <f:selectItems value="#{nodes.regionList}"/>
    <f:ajax render="fourth">
</h:selectOneMenu>
<h:selectOneMenu id="fourth" value="#{nodes.selectStation"}>
    <f:selectItems value="#{nodes.stationList}"/>
</h:selectOneMenu>

les nœuds de la Classe Java

private String selectState; //+setters, getters
private String selectCity; //+setters, getters
private String selectRegion; //+setters, getters
private String selectStation; //+setters, getters
private List<SelectItem> stateList; //+setters, getters
private List<SelectItem> cityList; //+setters, getters
private List<SelectItem> regionList; //+setters, getters
private List<SelectItem> stationList; //+setters, getters

public getStateList(){
    stateList= new ArrayList<SelectItem>();
    stateList.add(new SelectItem("A"));
}

public getCityList(){
    CityList= new ArrayList<SelectItem>();
    if(selectState.equals("A")){
        CityList.add(new SelectItem("B"));
    }
}

public getRegionList(){
    RegionList= new ArrayList<SelectItem>();
    if(selectCity.equals("B")){
        RegionList.add(new SelectItem("C"));
   }
}

public getStationList(){
    StationList= new ArrayList<SelectItem>();
    if(selectRegion.equals("C")){
        StationList.add(new SelectItem("D"));
    }
}

il ne fonctionne qu'aux 2 premiers menus les 2 autres menus obtiennent des valeurs nulles

6
demandé sur BalusC 2013-05-04 23:24:51

4 réponses

mettre le haricot dans la portée de vue et se débarrasser de toute logique commerciale dans les méthodes getter.

le bean doit être placé dans le champ d'application de la vue afin que toutes les sélections précédentes et les nouveaux articles disponibles soient mémorisés, sinon les choses échoueront si l'attribut rendered , par exemple, dépend d'une condition qui n'a été définie que dans une demande précédente, ou si JSF doit valider l'article sélectionné par rapport à la liste des articles disponibles.

les méthodes getter devraient ne pas contenir de logique d'affaires car ils seront également invoqués au cours d'un.O. Phase de validation. Vous devez utiliser <f:ajax listener> pour effectuer une logique commerciale basée sur un changement. Dans la méthode listener, vous devez également supprimer explicitement les valeurs sélectionnées des abandons d'enfants. Vous pouvez utiliser <f:ajax render> pour mettre à jour le contenu des "child dropdowns".

ainsi, ainsi:

<h:selectOneMenu id="state" value="#{nodes.selectedState}">
    <f:selectItem itemValue="#{null}" itemLabel="-- select --" />
    <f:selectItems value="#{nodes.availableStates}" />
    <f:ajax listener="#{nodes.changeState}" render="city region station" />
</h:selectOneMenu>
<h:selectOneMenu id="city" value="#{nodes.selectedCity}">
    <f:selectItem itemValue="#{null}" itemLabel="-- select --" />
    <f:selectItems value="#{nodes.availableCities}" />
    <f:ajax listener="#{nodes.changeCity}" render="region station" />
</h:selectOneMenu>
<h:selectOneMenu id="region" value="#{nodes.selectedRegion}">
    <f:selectItem itemValue="#{null}" itemLabel="-- select --" />
    <f:selectItems value="#{nodes.availableRegions}" />
    <f:ajax listener="#{nodes.changeRegion}" render="station" />
</h:selectOneMenu>
<h:selectOneMenu id="station" value="#{nodes.selectedStation}">
    <f:selectItem itemValue="#{null}" itemLabel="-- select --" />
    <f:selectItems value="#{nodes.availableStations}" />
</h:selectOneMenu>

avec

@ManagedBean
@ViewScoped
public class Nodes {

    private String selectedState; // getter+setter
    private String selectedCity; // getter+setter
    private String selectedRegion; // getter+setter
    private String selectedStation; // getter+setter
    private List<SelectItem> availableStates; // getter (no setter necessary!)
    private List<SelectItem> availableCities; // getter (no setter necessary!)
    private List<SelectItem> availableRegions; // getter (no setter necessary!)
    private List<SelectItem> availableStations; // getter (no setter necessary!)

    @EJB
    private SomeService someService;

    @PostConstruct
    public void init() {
        availableStates = someService.listStates();
    }

    public void changeState(AjaxBehaviorEvent event) {
        availableCities = someService.listCities(selectedState);
        selectedCity = selectedRegion = selectedStation = null;
        availableRegions = availableStations = null;
    }

    public void changeCity(AjaxBehaviorEvent event) {
        availableRegions = someService.listRegions(selectedCity);
        selectedRegion = selectedStation = null;
        availableStations = null;
    }

    public void changeRegion(AjaxBehaviorEvent event) {
        availableStations = someService.listStations(selectedRegion);
        selectedStation = null;
    }

    // Generate necessary getters+setters here. You should not change them.
}

voir aussi:

7
répondu BalusC 2017-05-23 12:33:50

il y a une erreur typographique dans votre code. Pour le troisième menu, vous avez donné le nom id comme "premier" au lieu de "troisième". Peut-être sa raison de ce problème.

1
répondu Archana 2013-05-07 09:26:16

essayez ceci, cela peut vous aider

en utilisant le --Select City-- , --Select Region--, --Select Station-- pour éviter l'Exception du pointeur nul.

    public getStateList(){
    stateList= new ArrayList<SelectItem>();
    stateList.add(new SelectItem("A"));
    }

    public getCityList(){
    CityList= new ArrayList<SelectItem>();
    if(selectState.equals("A"))
    {
      CityList.add(new SelectItem("B"));
    }
    else
    {
      CityList.add(new SelectItem("--Select City--"));
      selectCity = "--Select City--";
    }

    public getRegionList(){
    RegionList= new ArrayList<SelectItem>();
    if(selectCity.equals("B"))
    {
      RegionList.add(new SelectItem("C"));
    }
    else
    {
      RegionList.add(new SelectItem("--Select Region--"));
      selectRegion = "--Select Region--";
    }
    }

    public getStationList(){
    StationList= new ArrayList<SelectItem>();
    if(selectRegion.equals("C"))
    {
       StationList.add(new SelectItem("D"));
    }
    else
    {
      StationList.add(new SelectItem("Select Station"));
      selectStation = "--Select Station--";
    }
    }
-1
répondu newuser 2013-05-05 09:05:45

vous êtes confrontés à cette question parce que vous avez deux fois id="first" . Résoudre ce problème et cela devrait fonctionner.

-3
répondu msgoon6 2016-03-26 20:47:12