Verschiedene Farben der Optionen in selectOneMenu (Primefaces)

Ich muss verschiedene Farben der Optionen in Primefaces anzeigen.Verschiedene Farben der Optionen in selectOneMenu (Primefaces)

Ich habe einen selectOneMenu mit dynamischen Elementen (List)

<p:selectOneMenu id="carMenu" style="margin-top:4px;" 
    value="#{Bean.selectedCar}" effect="fade" 
    autoupdate="true"> 
    <f:selectItems id="carsId" 
     value="#{myBean.allCars}" var="carItems" 
     itemLabel="#{carItems.name}" itemValue="#{carItems}" /> 
</p:selectOneMenu>

private List<Cars> allCars;

Wenn das Auto verkauft wird, muß ich den Hintergrund der Option RED sonst BLACK anzuzeigen. In meinem Model habe ich ein Attribut, das mir den Wert (Boolean verkauft) zurückgibt, wenn das Auto verkauft wird oder nicht.

Wie kann ich die Farben in meinem selectOneMenu einstellen?

Quelle

2013-10-16 Johnny2012

Danke, lösche meinen Kommentar. Sie können Ihre Dateien löschen, um alles sauber zu halten – Kukeltje

Die Lösung besteht darin, die "fortgeschrittene" Art der Anzeige in PrimeFaces 4.0 und neuer zu verwenden.

Sie können f:selectItems Tag mit p:column Tags kombinieren für p:selectOneMenu (siehe the showcase), mit einer Iteration var für die Spalten selbst, wie Sie in den Tabellen tun.

Dann wäre die ideale Sache, die styleClass auf die gesamte Spalte abhängig von der Bedingung einzustellen, aber leider funktioniert es nicht. Zum Glück, das Hinzufügen einiger Javascript/jQuery-Code Sie Ihr Ziel erreichen können, lesen Sie in diesem SSCCE:

XHTML Seite

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui" style="height: 400px;"> 
<h:head> 
    <style type="text/css"> 
red-background { 
    //Empty, used just as a reference to set the style with jQuery 
} 
</style> 
</h:head> 
<h:body> 
    <h:form> 
     <p:commandButton action="#{bean.send}" value="Send" ajax="false" /> 
     <p:selectOneMenu id="carMenu" style="margin-top:4px;" 
      value="#{bean.selectedCar}" effect="fade" autoupdate="true" var="car" 
      converter="omnifaces.SelectItemsConverter" onchange="setSelectionColor();"> 
      <f:selectItems id="carsId" value="#{bean.allCars}" var="carItem" 
       itemLabel="#{carItem.name}" itemValue="#{carItem}" /> 
      <p:column> 
       <h:outputText value="#{car.name}" 
        styleClass="#{car.sold ? 'red-background' : ''}" /> 
      </p:column> 
     </p:selectOneMenu> 
    </h:form> 
    <script> 
     $(document).ready(function() { 
      //Set red background for the options (not for td, but for its parent tr) 
      $(".red-background").parent().css("background-color", "red"); 
      setSelectionColor(); 
     }); 
     function setSelectionColor(){ 
      //Check if the selected value has a red background 
      //(active and red-background styles altogether), 
      //if true, set the selectonemenu label to red too 
      if($(".ui-state-active .red-background").size() > 0){ 
       $(".ui-selectonemenu-label").css("background-color", "red"); 
      }else{ 
       $(".ui-selectonemenu-label").css("background-color", "white"); 
      } 
     } 
    </script> 
</h:body> 
</html>

Bean.java

@ManagedBean 
@ViewScoped 
public class Bean implements Serializable { 

    public class Car implements Serializable { 
     String name; 
     boolean sold; 

     public Car(String name, boolean sold) { 
      this.name = name; 
      this.sold = sold; 
     } 

     public String getName() { 
      return name; 
     } 

     public boolean isSold() { 
      return sold; 
     } 
    } 

    private List<Car> allCars = Arrays.asList(new Car("Audi", true), new Car(
      "Mercedes", false)); 

    public List<Car> getAllCars() { 
     return allCars; 
    } 

    private Car selectedCar; 

    public Car getSelectedCar() { 
     return selectedCar; 
    } 

    public void setSelectedCar(Car selectedCar) { 
     this.selectedCar = selectedCar; 
    } 

    public void send() { 
     System.out.println("Sent " + selectedCar.name); 
    } 

}

Sie auch sein könnte interessiert sich für die Einstellung nur die Schriftfarbe und nicht der Hintergrund:

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui"> 
<h:head> 
    <style type="text/css"> 
.red-font { 
    color: red; 
} 
</style> 
</h:head> 
<h:body> 
    <h:form> 
     <p:commandButton action="#{bean.send}" value="Send" ajax="false" /> 
     <p:selectOneMenu id="carMenu" style="margin-top:4px;" 
      value="#{bean.selectedCar}" effect="fade" autoupdate="true" 
      var="car" 
      converter="omnifaces.SelectItemsConverter"> 
      <f:selectItems id="carsId" value="#{bean.allCars}" var="carItems" 
       itemLabel="#{carItems.name}" itemValue="#{carItems}" /> 
      <p:column> 
       <h:outputText styleClass="#{car.sold ? 'red-font' : ''}" 
        value="#{car.name}" /> 
      </p:column> 
     </p:selectOneMenu> 
    </h:form> 
</h:body> 
</html>

Quelle

2013-10-16 14:19:02

Verschiedene Farben der Optionen in selectOneMenu (Primefaces)

Antwort

Verwandte Themen