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

【问题标题】：Set background color of every individual checkbox of p:selectManyCheckbox设置 p:selectManyCheckbox 的每个复选框的背景颜色
【发布时间】：2012-09-07 08:27:08
【问题描述】：

我正在使用这个http://www.primefaces.org/showcase-labs/ui/selectManyCheckbox.jsf primefaces 组件获取动态 booleanCheckboxes 值

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

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

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

我们知道这些是电影中的动态值，那么如何从支持 bean 为这些动态复选框设置背景颜色？

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

那么我应该如何将支持 bean 的颜色动态设置为 selectManyCheckbox 值？

【问题讨论】：

如果有人需要更多说明，请告诉我...

标签： css jsf-2 primefaces selectmanycheckbox

【解决方案1】：

可以用纯 CSS3 实现

根据您的实际要求。假设最终复选框的相同 html 结构是您链接到的示例中的默认结构，那么以下应该是完成它的纯 css3 方式。

请注意，此方法不会专门将颜色与特定电影/id 联系起来，它总是将第一部电影设置为红色，将第二部电影设置为橙色，等等。它也有一个实际限制。如果您计划列出 100 部电影，每部都有独特的颜色，那么这不是你。

但是如果您要列出一个小系列（最多 10 个？），或者您不介意如果颜色重复 经过一定的小规模抽样后，这可能是您的最佳选择。

Here's a fiddle showing both of the following

小套装

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

重复 4 色

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

【讨论】：

【解决方案2】：

这对于标准的<p:selectManyCheckbox> 是不可能的，至少对于这种动态来说是不可能的。如果它是静态值，您可以使用 CSS3 nth-child() 选择器。使用<p:selectManyCheckbox> 中的动态值，您基本上需要覆盖它的渲染器（这不是一项简单的工作）或发布功能请求（这可能需要比您想要的更长的时间）。

最好的办法是使用<ui:repeat> 或<h:dataTable>，而不是在每行基础上渲染一个<p:selectBooleanCheckbox>。这允许您在每个复选框的基础上指定 styleClass。这只需要对 selectedMovies 属性的填充方式进行技术更改。

这是一个具体的启动示例，<h:dataTable>（注意：<p:selectManyCheckbox> 本身也会生成一个<table>，所以布局技术上没有太大区别，如果桌子打扰你，你总是可以选择<ui:repeat>语义上）：

<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}" />

注意事项：

<h:dataTable styleClass> 使用与<p:selectManyCheckbox> 完全相同的 CSS，因此复选框表看起来'n'feel 完全相同。
converter="javax.faces.Boolean"（实际上，令我惊讶的是）是强制性的，因为否则它将检查值true 和false 设置为String 而不是Boolean； <h:selectBooleanCheckbox>中不存在这个问题，可能是PF错误？
在这个特定用例中styleClass="#{movie.type}" 比styleClass="#{movie.id}" 更有意义，因为为每个单独的“id”值指定一个单独的样式类似乎是一项可笑的任务，它通常代表一个唯一的自动分配的数据库标识符；如果需要，您可以随时在实际代码中更改它。
actionListener 在实际的action 方法之前收集selectedMovies。您当然也可以在实际的 action 方法中完成这项工作，但这样就不再那么干净地分开了。

支持 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、comedy、fantasy 和horror（顺便说一句，这是一个完美的enum 类型候选），那么您可以为各个复选框设置如下样式：

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

【讨论】：

【解决方案3】：

我知道这个解决方案有点老套，但它确实有效 :)

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

附言: css 文件可能不是必需的。

【讨论】：

【解决方案4】：

不确定您的浏览器目标是什么，但为什么不使用属性选择器？

ui-selectmanycheckbox input[value=1] {
    color: red;
}

这只是一般的想法...我不熟悉这些控件，但是文档使您看起来应该能够完成这项工作...

【讨论】：