Mises en page : Configuration de la grille de champ
Une grille de champs collecte plusieurs champs dans une mise en page unique mais, contrairement à un jeu, elle peut référencer d’autres lignes.
Une grille de champs présente de nombreux champs dans une disposition matricielle. Elles sont utiles lorsque vous devez demander le même ensemble d’informations un nombre prédéterminé de fois. Les grilles de champs permettent aux utilisateurs de créer une table de valeurs répétées. Dans une grille de champs, les lignes peuvent référencer d’autres lignes, tandis que dans un ensemble, un utilisateur ne peut pas écrire de règles entre les index.
Les grilles de champs peuvent s’étendre dans le sens des colonnes ou des lignes (c’est-à-dire horizontalement ou verticalement).
Définissez tous les champs destinés à être affichés dans la grille des champs. Matrix Loader est un bon outil pour cela. Associez les champs au plan dans lequel ils seront utilisés.
Configuration de la mise en page de la grille de champs
Pour ajouter une grille de champs à la mise en page, aucun ensemble de colonnes n’est nécessaire, car la grille de champs crée les lignes et les colonnes. Au lieu de cela, les types de ligne suivants sont nécessaires :
- fieldgrid: ce type indique à la mise en page qu’une grille de champ sera utilisée dans la mise en page
- fieldgriddata: ce type est utilisé pour chaque colonne de la grille de champs
- field: ce type est nécessaire pour chaque cellule de la grille de champ (pas pour chaque ligne)
Les trois premières images montrent le fichier CSV. La dernière image montre la disposition utilisateur correspondante. Les chiffres ci-dessus correspondent aux chiffres des images ci-dessous. (Comme le numéro 3 est indiqué plusieurs fois, une lettre est ajoutée pour plus de clarté.) Les cellules individuelles de la grille de champs ne peuvent pas avoir à la fois une étiquette et un champ d’entrée. Notez qu’en 3C, une étiquette et un champ d’entrée sont ajoutés au fichier CSV de mise en page. Cependant, seul le champ d’entrée va dans la mise en page.
Contrôles de l’interface utilisateur de la grille de champs
Divers aspects de l’interface utilisateur de la grille de champ peuvent être contrôlés en mettant à jour le champ de valeur dans le fichier CSV de mise en page :
- Visibilité du quadrillage
- En-têtes de colonnes dynamiques
- Largeur du champ de grille du champ
Éléments de Fieldgrid
Les valeurs suivantes peuvent être ajoutées à la colonne de valeur des éléments fieldgrid :
- indexPre: valeur de chaîne à afficher dans la colonne d’index avant le numéro d’index. facultatif
- indexPost: valeur de chaîne à afficher dans la colonne d’index après le numéro d’index. facultatif
- indexVisible: vrai | false, s’il faut afficher le numéro et la colonne d’index dans la mise en page de la grille des champs. Facultatif, par défaut : vrai
- maximumHeight: hauteur maximale à définir en pixels CSS. C’est-à-dire « 180px ». facultatif
- gridlines: tous | horizontale | verticale | aucun, contrôle l’affichage des lignes de grille entre les cellules. Facultatif, la valeur par défaut est tout.
Éléments Fieldgriddata
Les valeurs suivantes peuvent être ajoutées à la colonne de valeur des éléments fieldgriddata :
- fieldIndex: nom du champ à utiliser pour la valeur de l’en-tête. Facultatif. Si elle est incluse, l’étiquette de l’élément fieldgriddata doit être vide.
- width: largeur des champs. Facultatif. Si elle est incluse, des exemples de valeurs valides sont auto, 300 (px sont supposés ici), 300px, 20vwet calc(100% - 100px).
Par défaut, la largeur des grilles de champs est de 100 %, mais si une seule valeur de largeur est spécifiée pour un composant fieldgriddata contenu, la largeur de la grille de champs change de auto sorte qu’une largeur spécifiée puisse être appliquée.
Exemple de champ, d’en-têtes dynamiques de grille et de lignes de grille Fichier CSV