设置p:selectManyCheckbox的每个复选框的背景色

Question

我在用这个http://www.primefaces.org/showcase-labs/ui/selectManyCheckbox.jsfprimefaces组件获取动态布尔复选框值

<p:selectManyCheckbox value="#{bean.selectedMovies}"  
            layout="pageDirection">  
            <f:selectItems value="#{bean.movies}" />  
        </p:selectManyCheckbox> 

我需要对所有布尔复选框应用不同的颜色，如下图所示

如果id=1，则颜色为红色；如果id=2，则颜色为橙色，依此类推。

正如我们所知，这些是电影中的动态值，那么我如何从backing bean为这些动态复选框设置背景色呢？

我试图将样式应用于selectManyCheckbox，但它作为背景色应用于整个selectManyCheckbox面板。

那么，我应该如何动态地将颜色从backing bean设置为selectManyCheckbox值呢？

Answer 1

我知道这个解决方案有点老套，但它的工作原理：）

Xhtml文件：

<p:selectManyCheckbox binding="#{requestScope.movieSelect}" layout="pageDirection">
    <f:selectItems value="#{bean.movies}" />
</p:selectManyCheckbox>

<script>
(function() {
    var selectName = '#{requestScope.movieSelect.clientId}';
    var kids = jQuery("input[id*="+selectName+"]");
    var index = 0;

    <ui:repeat value="#{bean.movies}" var="movie">
        jQuery(kids[index++]).parent().next().css('background-color', '#{movie.description}');
    </ui:repeat>
}());
</script>

背豆：

public class Bean {

    private List<SelectItem> movies = Arrays.asList(
            new SelectItem("Scarface", "Scarface", "green"),
            new SelectItem("Goodfellas", "Goodfellas", "red"),
            new SelectItem("Godfather", "Godfather", "blue"),
            new SelectItem("Carlito's Way", "Carlito's Way", "yellow"));

    public List<SelectItem> getMovies() {
        return movies;
    }
}

css文件：

.ui-chkbox-box {
    background-image : none;
}

p、 美国：css文件可能不是必需的。

Answer 2

这是不可能的标准

你最好的选择是使用

下面是一个具体的启动示例，带有

<h:dataTable value="#{bean.movies}" var="movie" styleClass="ui-selectmanycheckbox ui-widget">
    <h:column>
        <p:selectBooleanCheckbox id="checkbox" converter="javax.faces.Boolean"
            value="#{bean.checkedMovieIds[movie.id]}" styleClass="#{movie.type}" />
    </h:column>
    <h:column>
        <p:outputLabel for="checkbox" value="#{movie.title}" />
    </h:column>
</h:dataTable>

<p:commandButton value="Submit" actionListener="#{bean.collectMovies}" action="#{bean.submit}" />

注意事项：

• 的<代码>

支持bean如下所示（checkedMovieIds假设Movie有一个Long id属性）：

private List<Movie> movies;
private Map<Long, Boolean> checkedMovieIds;
private List<Movie> selectedMovies;

@PostConstruct
public void init() {
    movies = populateItSomehow();
    checkedMovieIds = new HashMap<Long, Boolean>();
}

public void collectMovies(ActionEvent event) {
    selectedMovies = new ArrayList<Movie>();
    for (Movie movie : movies) {
        if (checkedMovieIds.get(movie.getId())) {
            selectedMovies.add(movie);
        }
    }
}

public void submit() {
    System.out.println(selectedMovies);
    // ...
}

// +getters (note: no setters necessary for all those three properties)

假设#{movie.type}可以有动作，喜剧，幻想和恐怖（顺便说一句，这是一个完美的枚举类型候选者），那么您可以按如下方式设置各个复选框的样式：

.action .ui-chkbox-box {
    background-color: red;
}

.comedy .ui-chkbox-box {
    background-color: orange;
}

.fantasy .ui-chkbox-box {
    background-color: green;
}

.horror .ui-chkbox-box {
    background-color: blue;
}

Answer 3

取决于你的实际需求。假设与您链接到的示例中相同的html结构是最终复选框的默认结构，那么下面应该是一种纯css3方式来实现它。

请注意，这种方法并没有专门将颜色与特定的电影/id绑定，它总是将第一部电影设置为红色，第二部设置为橙色，等等。它还有一个实际的限制。如果你计划列出100部电影，每部都有独特的颜色，那么这不是适合你的方法。

但如果您列出的是一个小集合（最多10个？），或者你不介意在某个小样本之后颜色重复，那么这可能是你最好的选择。

.ui-selectmanycheckbox tr:nth-of-type(1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(3) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+3) .ui-state-default {
    background-color: green;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+4) .ui-state-default {
    background-color: blue;
}