Yahoo! User Interface blog (YUIBlog)

Tableau des statistiques pied de page pour YUI 2 DataTable

13 janvier 2011 à 16:00 par Matt Parker | En développement | 2 Commentaires

La YUI 2 DataTable fait beaucoup. Mais une des choses qu'il ne fait pas est quelque chose avec un pied de table, où vous pourriez vous attendre à trouver des totaux, des moyennes ou des données sommaires d'autres. J'ai donc étendu DataTable pour ajouter des données sommaires pour les données numériques.

Mise ça va

Tout d'abord, pour l'utiliser: vous aurez besoin du code d' github - il ya trois fichiers js, et vous aurez besoin de tous sur votre page après le fichier YUI DataTable js. Et vous pourriez vouloir changer l'espace de noms - nous utilisons YAHOO.LPLT.DataTable que l'extension de YAHOO.widget.DataTable . Je vais vous expliquer un peu plus sur ces fichiers ci-dessous.

Vous mettez en place votre DataTable comme normal, mais il ya trois choses que vous devez faire pour obtenir le sommaire de travail:

1. Assurez-vous que votre source de données spécifie "nombre" des analyseurs pour les champs que vous voulez, pour résumer, surtout si vous faites l'édition de cellule en ligne:

     myDataSource.responseSchema = {champs: [
       {Clé: «la quantité», analyseur: "nombre"}
       / * Etc ..  * /
    ]};
   

2. Ajouter une config clé-valeur des columnStats: true dans votre tableau de définition de colonne:

     myColumnDefs var = [
        {Clé: «la quantité», l'étiquette: «Quantité», columnStats: true} 
        / * Etc ..  * /
    ];
   

   pour les colonnes que vous voulez résumer. (Le total de vos 'id' colonne n'est probablement pas très utile!).
3. Dites le DataTable dont les statistiques à calculer:

    var = new MyDataTable YAHOO.LPLT.DataTable ("exampleEl»,
        myColumnDefs, 
        MyDataSource, 
        {ColumnStats: {sur: vrai, stats: ['somme']}}
    );
   

   C'est le moyen le plus simple possible de configurer les statistiques de colonne, mais vous pouvez ajouter des statistiques supplémentaire, de personnaliser les étiquettes, et plus encore.

Il ya un exemple sur github pour jouer avec.

Quelques points:

• Le pied va changer avec votre table. Donc, si vous afficher / masquer des colonnes, les déplacer, en ajouter de nouvelles, ajouter / supprimer des lignes, trier ou utiliser des éditeurs de cellules en ligne, le pied de page sera mise à jour l'interface utilisateur et des statistiques en conséquence.
• Vous pouvez ajouter autant de lignes au pied de page que vous le souhaitez, une ligne pour chaque statistique. Tel qu'il est, vous pouvez avoir moyenne, la médiane, somme, min, max, plage, ECARTYPE, la variance ou varianceUnbiased. L'élément "stats" dans la configuration est un tableau: il suffit d'ajouter les statistiques que vous souhaitez à ce tableau (par exemple stats: ["min", "median", "stdev"] ).
• Le pied de table va utiliser tout formatage spécifié pour cette colonne.
• Si vous avez une pagination, vous pouvez choisir si les statistiques sont présentés pour la table entière ou seulement la page actuellement visible. Ajouter pagedTotals: true à l'columnStats objet pour avoir la page des statistiques.
• La gamme "stats" dans l'objet de configuration peuvent également inclure littéraux d'objet, avec 'label' clés et 'fn'. fn est la fonction qui va calculer des statistiques - soit une chaîne comme "min" ou une fonction qui renvoie un nombre. L'exemple montre comment sur github vous pourriez faire un «total pondéré» en utilisant les données de deux colonnes.

Plus sur le code d'extension réelle

Le fichier principal, YAHOO_DataTable_colStats.js, ajoute un couple de propriétés protégées à DataTable, quelques méthodes protégées, et deux méthodes publiques, colStatsRefresh qui sera re-calculer et de redessiner le pied de table, et colStatsGetRecordSet , qui retourne un tableau soit de tous les dossiers, ou seulement ceux visibles, selon la valeur de pagedTotals . Le premier peut être utile si vous apportez des modifications à la table qui ne se déclenche pas d'événements utiles (par exemple changeant directement les données dans les enregistrements sous-jacent), la seconde si vous utilisez les fonctions de synthèse personnalisée.

YAHOO_DataSource_patch.js ajoute une parseField(key, value) méthode pour DataSource. Ceci est nécessaire lorsque vous avez éditeurs textbox cellule en ligne pour les données numériques; l'éditeur renvoie une chaîne, ce qui n'est pas analysé automatiquement, et ne peuvent donc pas être ajouté. Le parseField donne accès à des analyseurs spécifié dans le DataSource, pour convertir les données modifiées.

YAHOO_util_Stats.js offre un standalone YAHOO.util.Stats classe qui encapsule un tableau (trié) des données numériques et fournit des statistiques sommaires. C'est seulement la dépendance est YAHOO.lang. Une instance YAHOO.util.Stats est maintenu par le DataTable pour chaque colonne qui doit être résumés, et les caches certains des maths plus difficile d'améliorer les performances. Les chaînes transmises à la baie de stats ('min', «médiane», etc) sont des méthodes de la classe YAHOO.util.Stats, vous pouvez donc facilement en ajouter d'autres en ajoutant au prototype. Notez cependant qu'ils ont seulement accès à des données «leur» colonne.

Et enfin

Je suis sûr que cela ne va pas à travailler avec datatables défilement, donc je n'ai même pas essayé! Mais si vous trouvez des problèmes ou avez des idées, s'il vous plaît, les mettre sur le tracker question github.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!