在 p:column filteroptions 中显示图标

【问题标题】：display icons in p:column filteroptions在 p:column filteroptions 中显示图标
【发布时间】：2013-02-21 17:14:43
【问题描述】：

我正在尝试在我的 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);
    }

【问题讨论】：

标签： jsf primefaces

【解决方案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;
}

【讨论】：

显然 html 选择只能支持文本元素，所以我猜这行不通。 jsfiddle.net/xLjCV
现在可以使用：http://jsfiddle.net/HtMqy/。不幸的是，在我最初的示例中，我使用了错误的 CSS cmets，因此忽略了背景图像规则。我已经编辑我的答案是正确的。谢谢！
注意：option 元素上的背景图片仅适用于 Firefox，不适用于 IE/Chrome。