Question

我有一个从模板创建的JSF页面，我想从我的支持bean添加CSS样式，因为从配置数据库中读取了一些CSS属性（如颜色等）。这些颜色用于rowStyleClass中的p:dataTable来自#{bean.getRowStyleClass(item)}。仅当样式标记在页面内是硬编码时才有效。如果从支持bean检索样式标记，则返回的字符串将作为普通字符串打印在页面上。

Kukeltje中提到的

Primefaces datatable: set row color from bean bean可以使用return ".redBackgroundColor { background-color: #FF0000; !important; }"动态创建选择器，并且bean可以创建完整的css部分（我在#{bean.styles}中执行）但这也导致了没有彩色行的dataTable。

的template.xhtml

<html>
    <h:head>...</h:head>
    <h:body>
        <ui:insert name="styles"/>
        <ui:insert name="content"/>
    </h:body>
</html>

page.xhtml

<html>
    <ui:composition template="/WEB-INF/template.xhtml">
        <ui:define name="styles">
            <!-- this works as expected -->
            <style type="text/css">
                .redBackgroundColor   { background-color: #FF0000; !important; }
                .blueBackgroundColor  { background-color: #00FF00; !important; }
                .greenBackgroundColor { background-color: #0000FF; !important; }
            </style>
            <!-- this does not work - it prints the string on the page --> 
            #{bean.styles}
        </ui:define>
        <ui:define name="content">
            <!-- here comes the page content -->
            <p:dataTable var="item"
                         value={#bean.values}
                         rowStyleClass="#{bean.getRowStyleClass(item)}">
                ...
            </p:dataTable>
        </ui:define>
    </ui:composition>
</html>

Bean.java

public class Bean {

    public String getStyles() {
        return new StringBuffer()
            .append("<style type=\"text/css\">")
            .append(".redBackgroundColor   { background-color: #FF0000; !important; }")
            .append(".blueBackgroundColor  { background-color: #00FF00; !important; }")
            .append(".greenBackgroundColor { background-color: #0000FF; !important; }") 
            .toString();
    }

    public String getRowStyleClass(Item item) {
        if (condition1) {
            return "redBackgroundColor";
        }
        if (condition2) {
            return "blueBackgroundColor";
        }
        if (condition3) {
            return "greenBackgroundColor";
        }
        return null;
    }

}

那么，如何在我的支持bean中创建样式并在p:dataTable rowStyleClass属性中使用它们？

我在Wildfly 10.0.0.Final上使用Primefaces 6.0

欢迎任何提示 - 谢谢！

Answer 1

当我将页面更改为：

时，它可以正常工作

    <style type="text/css">
        #{bean.styles}
    </style>

和bean方法：

public String getStyles() {
    return new StringBuffer()
        .append(".redBackgroundColor   { background-color: #FF0000; !important; }")
        .append(".blueBackgroundColor  { background-color: #00FF00; !important; }")
        .append(".greenBackgroundColor { background-color: #0000FF; !important; }")                 
        .toString();
}

从bean在JSF页面中创建CSS样式

1 个答案: