selectOneMenu (Primefaces)의 옵션 색상이 다양합니다

다른 색상의 옵션을 Primeface에 표시해야합니다.selectOneMenu (Primefaces)의 옵션 색상이 다양합니다

나는 차를 구입 한 경우에, 나는 그렇지 BLACK 옵션 RED의 배경을 표시해야 동적 항목 (목록)과 selectOneMenu

<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;

있습니다. 내 모델에는 차가 팔렸거나 판매되지 않으면 나에게 가치 (부울 판매)를 돌려주는 속성이 있습니다.

어떻게하면 내 selectOneMenu에서 색상을 설정할 수 있습니까?

출처

2013-10-16 Johnny2012

고맙습니다. 내 의견을 삭제하십시오. 모든 것을 깨끗하게 유지하기 위해 삭제할 수 있습니다. – Kukeltje

해결 방법은 PrimeFaces 4.0 이상에서이를 표시하는 '고급'방법을 사용하는 것입니다. 당신이 테이블에처럼

당신은 열에 대한 반복 var로 (the showcase 참조) p:selectOneMenu에 대한 p:column 태그와 함께 스스로를 f:selectItems 태그를 결합 할 수 있습니다.

그런 다음 조건에 따라 styleClass을 전체 열로 설정하는 것이 좋지만 불행히도 작동하지 않습니다.

@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); 
    } 

}

당신은 또한 수 있습니다

XHTML 페이지

<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 : 다행히, 당신은 당신의 목표를 달성 할 수있는 몇 가지 자바 스크립트/jQuery 코드를 추가,이 SSCCE 체크 아웃 배경색이 아닌 글꼴 색만 설정하는 데 관심이 있습니다.

<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>

출처

2013-10-16 14:19:02

selectOneMenu (Primefaces)의 옵션 색상이 다양합니다

답변

관련 문제