Styling dynamique 25.00
Dans webforJ 25 et versions supérieures, il est possible de styliser des lignes et des cellules individuelles dans le tableau en utilisant des noms de parties personnalisés. Ces noms peuvent être attribués dynamiquement en fonction de la logique de votre application, vous donnant un contrôle précis sur l'apparence du tableau.
Stylisation des lignes
La méthode setRowPartProvider()
attribue des noms de parties à des lignes entières en fonction des éléments de données qu'elles contiennent. Cela vous permet de mettre en évidence des lignes complètes qui répondent à des conditions spécifiques, par exemple, des couleurs de fond alternées pour les lignes paires.
Ces noms de style peuvent être ciblés en utilisant le sélecteur ::part()
dans votre CSS.
Le sélecteur ::part()
est une fonctionnalité CSS spéciale qui permet de styliser des éléments à l'intérieur du DOM d'ombre d'un composant, tant que ces éléments exposent un attribut part
. Ceci est particulièrement utile pour le stylisation des parties internes des composants webforJ, comme les lignes ou les cellules dans un tableau.
Pour plus d'informations sur le fonctionnement des parties d'ombre et comment les définir et les cibler, consultez la section Stylisation.
Afficher le code
- Java
Stylisation des cellules
La méthode setCellPartProvider()
stylise des cellules individuelles en fonction à la fois de l'élément de données et de la colonne à laquelle elles appartiennent. Cela le rend idéal pour mettre en évidence des valeurs spécifiques, comme signaler des âges dépassant un seuil ou des entrées invalides.
Comme pour les parties de ligne, les parties de cellule sont définies par un nom et ciblées à l'aide du sélecteur ::part()
.
Afficher le code
- Java
Réaction aux mises à jour de données
Si votre application modifie des données par programmation, comme mettre à jour l'âge d'un utilisateur, le tableau réévaluera automatiquement et réappliquera tous les styles de lignes ou de cellules associés une fois que l'élément mis à jour est engagé dans le référentiel.
Afficher le code
- Java
Lignes rayées
Activez des couleurs de fond alternées pour les lignes afin d'améliorer la lisibilité :
// Appliquer un style de ligne rayé
table.setStriped(true);
Bordures
Configurez quelles bordures sont affichées autour du Table
, des colonnes et des lignes :
// Activer toutes les bordures
table.setBordersVisible(EnumSet.of(Table.Border.AROUND, Table.Border.COLUMNS, Table.Border.ROWS));
// Supprimer toutes les bordures
table.setBordersVisible(EnumSet.noneOf(Table.Border.class));
La démo ci-dessous présente une manière simple d'aligner l'apparence visuelle de votre Table
avec le reste de votre application en utilisant setStriped()
et setBordersVisible()
.
Afficher le code
- Java
Pour des informations sur l'utilisation du modèle Repository
pour gérer et interroger des collections, consultez les articles sur le dépôt.