jquery - 根据枚举显示 selectOneMenu 项目背景颜色

Question

我已经看到了这个答案，但我不确定如何在 p:selectOneMenu 中显示项目，背景颜色由枚举值支持。

在下拉列表中，我想从枚举中获取项目，每个项目都有不同的颜色。

我正在使用 PrimeFaces 6.2，所以我不确定如何使用建议BalusC 来覆盖 SelectOneMenuRenderer - 使用自定义渲染器。

这是我到目前为止所尝试的。

索引.xhtml

<h:body>        
<h:form>
    <h:panelGrid id="createPanelGrid" columns="2">
        <p:outputLabel value="Color options:" />
        <p:selectOneMenu value="#{colorBean.selectedColor}" var="sc">
            <f:selectItem itemLabel="Select a color" itemValue="" />
            <f:selectItems value="#{colorBean.colorList}" 
                           var="color" 
                           itemLabel="#{color}" 
                           itemValue="#{color}" />
            <p:column>
                <div style="background-color: #{color};">
                    &nbsp;
                </div>                             
            </p:column>
            <p:column>#{sc}</p:column>
        </p:selectOneMenu>
    </h:panelGrid>
</h:form>
</h:body>

ColorBean.java

import java.io.Serializable;
import javax.inject.Named;
import javax.faces.view.ViewScoped;

@Named("colorBean")
@ViewScoped
public class ColorBean implements Serializable {

private String selectedColor = "White";

public ColorBean() {
}

public ColorsEnum[] getColorList() {
    return ColorsEnum.values();
}

public String getSelectedColor() {
    return selectedColor;
}

public void setSelectedColor(String selectedColor) {
    this.selectedColor = selectedColor;
}
}

颜色枚举.java

import java.util.ArrayList;
import java.util.List;

public enum ColorsEnum {
WHITE("White"),
RED("Red"),
ORANGE("Orange"),
GREEN("Green"),
BLUE("Blue");

private final String label;

private ColorsEnum(String label) {
    this.label = label;
}

public String getLabel() {
    return this.label;
}

public static final List<String> colorList() {
    List<String> colors = new ArrayList<>();
    colors.add(ColorsEnum.WHITE.label);
    colors.add(ColorsEnum.RED.label);
    colors.add(ColorsEnum.ORANGE.label);
    colors.add(ColorsEnum.GREEN.label);
    colors.add(ColorsEnum.BLUE.label);        
    return colors;
}    
}

标签： jqueryjsfprimefaces