Question

我在Primefaces 3.5中使用JSF。我使用p:panelGrid而没有columns属性，而是使用p:row和p:column显式创建行和列，如展示（http://www.primefaces.org/showcase/ui/panelGrid.jsf）所示。

现在我需要在一些CSS类的帮助下以不同的方式设置一行样式。但要么我错过了，要么就是没有办法向p:row添加课程？！我甚至可以设置属性styleClass，但在渲染输出中会被忽略...

有没有办法以某种方式将panelGrid中的行与其类区分开来？

Answer 1

尝试在css上使用通配符（以数据结尾的所有td进行数学运算）

像这样（选择其id以myRowId结尾的所有td）

tr[id*='myRowId'] {
    color:red 
}

这是jsfiddle

以前的回答......

由于您无法在p:row上使用styleClass，因此可以尝试以下

为p:row分配一个ID，如下所示：<p:row id="myRowId "

以下列方式应用样式（在css文件中）

#myFormId\3A SomeNamingContainer\3A myRowId {
    background-color: red;
}

请查看您网页的来源，以便用您的真实ID替换myFormId和SomeNamingContainer ...

另请阅读：How to use JSF generated HTML element ID in CSS selectors?

Answer 2

I don't know why the styleClass attribute is ignored by default (at least until PrimeFaces version 6.2), but you can create a custom renderer that appends its value to the HTML output. A simple drop in replacement for the default PrimeFaces renderer looks like this:

public class PanelGridBodyRowRenderer extends CoreRenderer implements HelperRowRenderer {

    @Override
    public void encode(FacesContext context, Row row) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        String rowStyleClass = PanelGrid.TABLE_ROW_CLASS;
        String userRowStyleClass = row.getStyleClass();
        if (userRowStyleClass != null) {
            rowStyleClass = rowStyleClass + " " + userRowStyleClass;
        }

        writer.startElement("tr", row);
        writer.writeAttribute("class", rowStyleClass, null);
        writer.writeAttribute("role", "row", null);
        renderChildren(context, row);
        writer.endElement("tr");
    }

}

For PrimeFaces version 6.2 you can simply create this renderer class within the package org.primefaces.component.row.renderer in your WAR. The classloader will then load your renderer instead of the identical renderer class within the PrimFaces JAR.

For more information on custom components and renderers see this answer.

Answer 3

如果您需要在其他行中使用相同的样式，也许您可以使用p:column中的列样式（根据您对Daniel的回复）。这样的事情：

.stylePerColumn {
    background-color: #F22626;
    color: black;
    border-style: none !important;
}

和int xhtml文件<p:column styleClass="stylePerColumn ">...</p:column>（对于每个需要的列）。

将样式添加到特定的p：行

3 个答案: