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

我在用这个 primefaces组件以获取动态布尔复选框值

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

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

若id=1，则颜色为红色；若id=2，则颜色为橙色；若id=2，则颜色为红色 等等

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

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

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

---

这在标准的

中是不可能的，至少在这种动态中是不可能的。如果它是静态值，您可以使用CSS3选择器来实现这一点。对于

中的动态值，您基本上需要覆盖其呈现程序（这不是一项简单的工作）或发布功能请求（这可能需要比您想要的更长的时间）

您最好的选择是使用

或

而不是按行渲染单个

。这允许您在每个复选框的基础上指定

styleClass

。这还需要对

selectedMovies

属性的填充方式进行技术更改

下面是一个具体的启动示例，其中包含

（注意：

本身也会生成一个

，因此布局技术上没有太大差异，如果表在语义上困扰您，您可以始终选择

）：

注:

• 使用与
  完全相同的CSS，因此复选框表的外观与感觉完全相同

• converter=“javax.faces.Boolean”

  是强制性的（实际上，令我惊讶的是），因为它会将选中的值

  true

  和

  false

  设置为

  字符串，而不是
  布尔值
  ；
  中不存在此问题，可能是PF错误

• styleClass=“#{movie.type}”

  在这个特定的用例中比

  styleClass=“#{movie.id}”

  更有意义，因为为每个单独的“id”值指定一个单独的样式类似乎是一项可笑的任务，它通常表示一个唯一的自动分配的DB标识符；如果需要，您可以随时在实际代码中更改它

• actionListener

  在实际的

  action

  方法之前收集

  selectedMovies

  。当然，您也可以使用实际的

  action

  方法来完成这项工作，但这样一来，它就不再那么清晰地分开了

支持bean如下所示（checkedMovieIds假设

Movie

具有

Long id

属性）：

---

我知道这个解决方案有点老套，但它是有效的：）

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>

---

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

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

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

这只是一般的想法。。。我不熟悉这些控件，但文档使它看起来您应该能够实现这一点…

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

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

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

小套

.ui选择manycheckbox tr:n类型（1）。ui状态默认值{
背景色：红色；
}
.ui selectmanycheckbox tr:n类型（2）。ui状态默认值{
背景颜色：橙色；
}
.ui selectmanycheckbox tr:n类型（3）。ui状态默认值{
背景色：红色；
}
.ui selectmanycheckbox tr:n类型（4）。ui状态默认值{
背景颜色：橙色；
}

重复四色

.ui选择manycheckbox tr:n类型（4n+1）。ui状态默认值{
背景色：红色；
}
.ui selectmanycheckbox tr:n类型（4n+2）。ui状态默认值{
背景颜色：橙色；
}
.ui selectmanycheckbox tr:n类型（4n+3）。ui状态默认值{
背景颜色：绿色；
}
.ui selectmanycheckbox tr:n类型（4n+4）。ui状态默认值{
背景颜色：蓝色；
}

如果有人需要进一步澄清，请告诉我。。。

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

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

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