css 向特定p:panelGrid行添加样式

s71maibg  于 2023-04-01  发布在  其他
关注(0)|答案(3)|浏览(133)

我在PrimeFaces 3.5中使用JSF。我使用p:panelGrid而不使用columns属性,而是显式地使用p:rowp:column创建行和列,如展示(https://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml)中所示。
现在我需要在一些CSS类的帮助下对一行进行不同的样式设置。但是,要么是我缺少了它,要么就是没有办法向p:row添加一个类?!我甚至可以设置属性styleClass,但它在渲染输出中被忽略了...
有没有办法通过类来区分panelGrid中的行?

eivgtgni

eivgtgni1#

我不知道为什么默认情况下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。

ajsxfq5m

ajsxfq5m2#

尝试在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替换myFormIdSomeNamingContainer
另请阅读:How to use JSF generated HTML element ID in CSS selectors?

brccelvz

brccelvz3#

如果您需要在其他行中使用相同的样式,也许您可以使用p:column中的列样式(根据您对丹尼尔的回复)。类似于以下内容:

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

并对xhtml文件<p:column styleClass="stylePerColumn ">...</p:column>进行int(到所需的每一列)。

相关问题