Ajout d'une section de pied de page à la grille
Vous pouvez ajouter une section de pied de page à la grille en activant la propriété ShowFooter du widget ou en utilisant des données de configuration JSON. L'ajout d'un pied de page vous permet d'afficher des informations récapitulatives, telles que le total ou la moyenne des valeurs d'une colonne spécifique. Pour afficher les noms de colonne d'en-tête dans le pied de page, activez la propriété ShowHeaderRowInFooter.
Fonctions prédéfinies
Vous pouvez utiliser les fonctions prédéfinies suivantes pour afficher les données de pied de page de chaque colonne de la grille :
• {#stat_count} : compte le nombre de lignes.
• {#stat_max} : calcule la valeur maximale côté client pour les valeurs de la colonne.
• {#stat_min} : calcule la valeur minimale côté client pour les valeurs de la colonne.
• {#stat_average} : calcule la valeur moyenne côté client pour les valeurs de la colonne.
• {#stat_total} : calcule la valeur totale côté client pour les valeurs de la colonne.
• {#cspan} : couvre plusieurs colonnes, ce qui permet de fusionner des cellules dans le pied de page. Vous devez désactiver la réorganisation des colonnes lorsque les cellules sont fusionnées. La réorganisation des colonnes peut affecter l'apparence du pied de page.
 |
Vous pouvez également définir et utiliser des fonctions personnalisées dans le service de données.
|
Pour aligner les données dans le pied de page, utilisez #cspan et les options d'alignement text-align:left ou text-align:right. Utilisez un caractère d'échappement HTML pour les virgules dans le texte, suivi du paramètre d'alignement, défini par défaut sur text-align:left.
Création d'un service de données pour le pied de page
Pour configurer le pied de page, vous devez lier une table d'informations qui définit les règles de configuration à utiliser pour la propriété FooterData. Voici un exemple de service qui définit une table d'informations avec des données pour le pied de page de la grille.
Définissez une variable pour stocker la sortie de la table d'informations.
var result = createInfoTable();
function createInfoTable() {
var params = {
infoTableName: undefined /* STRING */
};
function createInfoTable() {
var params = {
infoTableName: undefined /* STRING */
};
Une fois que vous avez défini la table d'informations, utilisez la méthode AddField pour créer des colonnes qui correspondent aux noms de champ des données de la grille.
var result = Resources["InfoTableFunctions"].CreateInfoTable(params);
//Add field to the InfoTable, ensure same field names in this footer data as are used in the actual table data:
result.AddField({name: "deviceName", baseType: "STRING"});
result.AddField({name: "motorTemp", baseType: "STRING"});
//Add field to the InfoTable, ensure same field names in this footer data as are used in the actual table data:
result.AddField({name: "deviceName", baseType: "STRING"});
result.AddField({name: "motorTemp", baseType: "STRING"});
Pour définir le contenu du pied de page, ajoutez des données dans les colonnes de table d'informations que vous avez créées précédemment.
result.AddRow({
'deviceName': 'Count: {#stat_count}', // Calculate the number of rows under the column.
'motorTemp': 'Average: {#stat_average}', // Calculate the average of all the values under the column.
});
return result;
}
La figure suivante illustre la sortie du service lorsqu'il est lié au widget Grille :
