将样式添加到特定 p:row答案

【问题标题】：Adding style to specific p:row将样式添加到特定 p:row
【发布时间】：2013-06-28 16:03:00
【问题描述】：

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

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

有没有办法通过其类以某种方式区分panelGrid 中的一行？

【问题讨论】：

只是想知道您是否可以像这样滥用 primefaces pass through 属性 <p:row pt:class="mySpecialClass"..... blog.primefaces.org/?p=2714 顺便说一句，如果它只有一行，您可以使用其唯一的 id 对其进行样式设置。 .
我们“仍然”在使用 JSF 2.1 (JEE 6)，所以我们不能利用这个想法，尽管我会密切关注这一点。对于这一行，我什至没有唯一的 ID。即使我有一个，我也不知道，所以我不能给它附加样式......
如果您的客户不使用 IE，我编辑了我的答案，我认为您可以使用它
使用 p:panelGrid 有什么特别的收获吗？您始终可以使用显式 xhtml 标记并不受限制地分配类。

标签： jsf primefaces

【解决方案1】：

我不知道为什么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 答案。

【讨论】：

【解决方案2】：

尝试在 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;
}

请查看您页面的源代码，以便将myFormId 和SomeNamingContainer 替换为您的真实身份...

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

【讨论】：

这样我就可以做一排了，谢谢。但是如果我在几个不同的p:panelGrids 中有几行或相同的逻辑，我就会有几十个 CSS 规则...... :-(

【解决方案3】：

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

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

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

【讨论】：