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

Question

我正在使用此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面板。

那么我该怎样设置从backing bean到selectManyCheckbox值的颜色？

Answer 1

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

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

以下是<h:dataTable>的具体启动示例（注意：<p:selectManyCheckbox>本身也会生成<table>，所以布局 - 技术上没有那么大差异，您可以随时选择{{ 1}}如果表在语义上困扰你）：

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

支持bean看起来像这样（action假定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

Answer 2

可以使用Pure 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;
}

Answer 3

我知道这个解决方案有点hacky，但它有效：）

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>

支持bean：

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.S。 ：css文件可能不是必需的。

Answer 4

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

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

这只是一般的想法......我不熟悉那些控件，但是文档看起来你应该能够做到这一点......