Разные цвета опций в selectOneMenu (Primefaces)

Мне нужно отображать разные цвета опций в Primefaces.

У меня есть 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?


jsf primefaces jsf-2 selectonemenu
person Johnny2012    schedule 16.10.2013    source источник
comment
Спасибо, удалите мой комментарий. Вы можете удалить свой сто, чтобы сохранить все в чистоте   -  person Kukeltje    schedule 04.01.2016

Ответы (1)


arrow_upward
10
arrow_downward

Решение состоит в том, чтобы использовать «расширенный» способ отображения этого в PrimeFaces 4.0 и новее.

Вы можете комбинировать тег f:selectItems с тегами p:column для p:selectOneMenu (см. витрину) , с итерацией var для самих столбцов, как в таблицах.

Тогда идеально было бы установить styleClass для всего столбца в зависимости от условия, но, к сожалению, это не работает. К счастью, добавив немного кода Javascript/jQuery, вы можете достичь своей цели, проверьте это SSCCE:

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>

Бин.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);
    }

}

Вас также может заинтересовать установка только цвета шрифта, а не фона:

<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>
person Xtreme Biker    schedule 16.10.2013