jsf - 在 p:column filteroptions 中显示图标

Question

我正在尝试在我的 p:datatable 上将图标显示为 filterOptions。目前的情况是我显示一个 unicode 符号列表，但客户希望它们是彩色的。下面的代码显示了我如何在我的 backingbean 中填充我的状态列表（我的过滤器选项）。

private static final String LABEL_DEACTIVATED = "\u24E7";
private static final String LABEL_ACTIVATED = "\u2714";
private void fillSelectItem() {
        userStates = new SelectItem[3];

        userStates[0] = new SelectItem("", LABEL_ALL);
        userStates[1] = new SelectItem(USER_ACTIVATED.name(), LABEL_ACTIVATED);
        userStates[2] = new SelectItem(USER_DEACTIVATED.name(),
                LABEL_DEACTIVATED);
    }

Answer 1

只要您的目标浏览器支持 CSS2 属性选择器（即几乎所有现代浏览器），您就可以使用 CSS 来设置每个单独图标的样式。将以下内容放入您的 css 文件中：

option[value='USER_ACTIVATED'] {
    /* for example */
    background-image: url(.....);
    background-color: #123456;   
    color: #123123;
}

option[value='USER_DEACTIVATED'] {
    /* for example */
    background-image: url(.....);
    background-color: #888111;   
    color: #222222;
}