Zum Hauptinhalt springen

Dynamische Gestaltung 25.00

ChatGPT öffnen

In webforJ 25 und höher ist es möglich, einzelne Zeilen und Zellen in der Tabelle mithilfe von benutzerdefinierten Parts-Namen zu gestalten. Diese Namen können dynamisch basierend auf der Logik Ihrer App zugewiesen werden, wodurch Sie eine feine Steuerung über das Erscheinungsbild der Tabelle erhalten.

Zeilengestaltung​

Die Methode setRowPartProvider() weist gesamten Zeilen basierend auf dem Datenobjekt, das sie enthalten, Parts-Namen zu. Dies ermöglicht es Ihnen, vollständige Zeilen hervorzuheben, die bestimmten Bedingungen entsprechen—zum Beispiel alternative Hintergrundfarben für gerade Zeilen.

Diese Stilnamen können mit dem ::part()-Selektor in Ihrem CSS angesprochen werden.

Schatten-Parts

Der ::part()-Selektor ist ein spezielles CSS-Feature, das es Ihnen ermöglicht, Elemente innerhalb des Shadow DOM eines Komponentes zu gestalten—sofern diese Elemente ein part-Attribut bereitstellen. Dies ist besonders nützlich, um interne Teile von webforJ-Komponenten wie Zeilen oder Zellen in einer Tabelle zu gestalten.

Für mehr Informationen darüber, wie Schatten-Parts funktionieren und wie man sie definiert und anvisiert, siehe den Abschnitt Styling.

Code anzeigen

Zellengestaltung​

Die Methode setCellPartProvider() gestaltet einzelne Zellen basierend auf dem Datenobjekt und der Spalte, zu der sie gehören. Dies ist ideal, um spezifische Werte hervorzuheben, wie Altersangaben, die einen Schwellenwert überschreiten, oder ungültige Einträge.

Ähnlich wie bei Zeilen-Parts werden Zell-Parts durch einen Namen definiert und mit dem ::part()-Selektor angesprochen.

Code anzeigen

Reaktion auf Datenaktualisierungen​

Wenn Ihre App Daten programmgesteuert ändert, wie zum Beispiel das Aktualisieren des Alters eines Benutzers, wird die Tabelle automatisch alle zugehörigen Zeilen- oder Zellstile erneut evaluieren und anwenden, sobald das aktualisierte Element im Repository gespeichert wurde.

Code anzeigen

Gestreifte Zeilen​

Aktivieren Sie abwechselnde Hintergrundfarben für Zeilen, um die Lesbarkeit zu verbessern:

// Gestreifte Zeilengestaltung anwenden
table.setStriped(true);

Rahmen​

Konfigurieren Sie, welche Rahmen um die Tabelle, Spalten und Zeilen angezeigt werden:

// Alle Rahmen aktivieren
table.setBordersVisible(EnumSet.of(Table.Border.AROUND, Table.Border.COLUMNS, Table.Border.ROWS));

// Alle Rahmen entfernen
table.setBordersVisible(EnumSet.noneOf(Table.Border.class));

Die Demo unten zeigt eine einfache Möglichkeit, das visuelle Erscheinungsbild Ihrer Tabelle mit dem Rest Ihrer App in Einklang zu bringen, indem Sie setStriped() und setBordersVisible() verwenden.

Code anzeigen