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

Posted 2023-02-23

【中文标题】设置 p:selectManyCheckbox 的每个复选框的背景颜色

【英文标题】：Set background color of every individual checkbox of 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 值？

【问题讨论】：

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

【参考方案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;

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