Das hinzufügen von Stil zu spezifischen p:row

Ich nutze JSF mit Primefaces 3.5. Ich benutze die p:panelGrid ohne die columns Attribut, stattdessen habe ich explizit erstellen, Zeilen und Spalten mit p:row und p:column wurde gezeigt, wie in der Vitrine (http://www.primefaces.org/showcase/ui/panelGrid.jsf).

Jetzt brauche ich, um Stil eine Zeile anders mit der Hilfe von ein paar CSS-Klasse. Aber entweder fehlt es oder es gibt einfach keine Möglichkeit, fügen Sie eine Klasse zu einem p:row?! Ich kann sogar das Attribut styleClass, aber es wird ignoriert, in der gerenderten Ausgabe ...

Gibt es eine Möglichkeit, irgendwie unterscheiden, eine Zeile in einer panelGrid von seiner Klasse?

  • einfach Fragen, wenn Sie missbrauchen können die primefaces-pass-through-Attribut wie dieses <p:row pt:class="mySpecialClass"..... blog.primefaces.org/?p=2714 b ist.t.w, wenn nur eine Zeile können Sie Stil mit dieser eindeutigen id...
  • Wir sind "noch" mit JSF 2.1 (JEE 6), so können wir nicht mit dieser Idee, obwohl ich ein Auge auf dieses. Und für die Zeile, die ich nicht selbst eine eindeutige ID. Und selbst wenn ich einen hätte, würde ich nicht wissen, so konnte ich nicht befestigen Sie einen Stil, um ihn ...
  • ich bearbeitet meine Antwort, wenn Sie Ihre Kunden nicht verwenden, DH Sie können es verwenden, denke ich
  • Gibt es etwas bestimmtes, das Sie gewinnen aus der Verwendung von p:panelGrid? Sie können immer gehen mit expliziten xhtml-tags und weisen Klassen mit keinen Einschränkungen.
InformationsquelleAutor Dominik Sandjaja | 2013-07-01
  1. 0

    Versuchen Sie es mit einer wild card auf dem css (Mathematik alle td endet mit Ihrer id)

    Wie folgt aus (alle auswählen td, dass seine id endet mit myRowId)

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

    Hier ein jsfiddle

    Vorherige Antwort...

    Da Sie nicht verwenden können, styleClass auf p:row Sie können versuchen, die folgenden

    Weisen, dass p:row eine id, wie z.B. : <p:row id="myRowId "

    Und weisen Sie den Stil in der folgenden Weise (in der css-Datei)

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

    Tun Quelltext Ihrer Seite, um die zu ersetzen, die myFormId und SomeNamingContainer mit Ihrem real-ids...

    Lesen Sie auch dies : Wie zu verwenden JSF generiert HTML-element-ID in CSS-Selektoren?

    • Das wäre mir erlauben, es zu tun für eine Zeile, danke. Aber wenn ich mehrere Zeilen oder die gleiche Logik innerhalb verschiedener p:panelGrids, ich hätte Dutzende von CSS-Regeln ... 🙁
    • Aktualisiert meine Antwort...
    InformationsquelleAutor Daniel
  2. 0

    Ich weiß nicht, warum die styleClass Attribut ist standardmäßig ignoriert (zumindest bis PrimeFaces version 6.2), aber Sie können erstellen Sie eine benutzerdefinierte renderer fügt seinen Wert für die HTML-Ausgabe. Eine einfache drop-in-Ersatz für die Standard-PrimeFaces-renderer sieht wie folgt aus:

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

}

    Für PrimeFaces version 6.2 können Sie einfach erstellen Sie diese renderer-Klasse innerhalb des Pakets org.primefaces.component.row.renderer in den KRIEG. Der classloader laden Sie dann Ihre renderer statt der identischen renderer-Klasse innerhalb der PrimFaces JAR.

    Für mehr Informationen über benutzerdefinierte Komponenten und Renderer sehen diese Antwort.

    InformationsquelleAutor ltlBeBoy
  3. 0

    Wenn Sie den gleichen Stil in anderen Zeilen, vielleicht können Sie mit der Spalte Stil von p:column (gemäß Ihrer Antwort an Daniel). So etwas wie dieses: 

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

    und int die xhtml-Datei <p:column styleClass="stylePerColumn ">...</p:column> (für jede Spalte).

    InformationsquelleAutor danRod
Schreibe einen Kommentar