9

我正在使用这个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 值？

在此处输入图像描述

4

4 回答 4

4

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

支持 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候选类型），那么您可以按如下方式设置各个复选框的样式：fantasyhorrorenum

.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;
}
于 2012-09-17T13:36:42.183 回答
4

使用纯 CSS3 可能是可行的

根据你的实际要求。假设最终复选框的相同 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;
}

重复 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;
}
于 2012-09-23T18:04:53.183 回答
0

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

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

ps：css文件可能不是必需的。

于 2012-09-17T20:06:34.570 回答
0

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

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

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

于 2012-09-17T20:29:00.737 回答