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

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上使用外卡（以数学结束所有以你的id结尾的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

我不知道为什么默认情况下会忽略styleClass属性（至少在PrimeFaces版本6.2之前），但您可以创建一个自定义渲染器，将其值附加到HTML输出。简单替换默认的PrimeFaces渲染器如下所示：

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

}

对于PrimeFaces 6.2版，您只需在WAR中的org.primefaces.component.row.renderer包中创建此渲染器类。然后，类加载器将加载渲染器，而不是PrimFaces JAR中的相同渲染器类。

有关自定义组件和渲染器的更多信息，请参阅this答案。

Answer 3

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

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

和int xhtml文件<p:column styleClass="stylePerColumn ">...</p:column>（到每个列所需）。