Inizio Blog User Interface (YUIBlog)

Statistiche footer Tabella per YUI 2 DataTable

13 Gennaio, 2011 alle 4:00 pm da Parker Matt | In Sviluppo | Nessun Commento

Il YUI 2 DataTable fa un sacco. Ma una delle cose che fa non è niente con un piè di tabella, in cui ci si potrebbe aspettare di trovare totali, medie o altri dati di riepilogo. Così ho esteso DataTable per aggiungere dati di riepilogo per i dati numerici.

Come andando

In primo luogo, per usarlo: è necessario generare il codice da github - ci sono tre file js, e avrete bisogno di tutti loro nella tua pagina dopo la DataTable file js YUI. E si potrebbe desiderare di cambiare lo spazio dei nomi - usiamo YAHOO.LPLT.DataTable come l'estensione delle YAHOO.widget.DataTable . Mi spiego un po 'più su questi file qui sotto.

Aver impostato il datatable come normale, ma ci sono tre cose che dovete fare per ottenere la sintesi di lavoro:

1. Assicurati che il tuo datasource specifica "numero" parser per tutti i campi si desidera riepilogare, in particolare se si sta facendo la modifica in linea delle cellule:

     myDataSource.responseSchema = {fields: [
       {Chiave: "quantità", parser: "numero"}
       / * Ecc ..  * /
    ]};
   

2. Aggiungere un config chiave-valore di columnStats: vero nella propria matrice colonna definizione:

     myColumnDefs var = [
        {Chiave: "quantità", etichetta: "Quantità", columnStats: true} 
        / * Ecc ..  * /
    ];
   

   per le colonne che si desidera riepilogare. (Il totale della colonna 'id' probabilmente non è molto utile!).
3. Dì la datatable che le statistiche per calcolare:

    MyDataTable var = YAHOO.LPLT.DataTable nuovo ("exampleEl",
        myColumnDefs, 
        MyDataSource, 
        {ColumnStats: {il: vero, le statistiche: ['somma']}}
    );
   

   Questo è il modo più semplice possibile per configurare le statistiche di colonna, ma si possono aggiungere le statistiche extra, personalizzare le etichette e altro ancora.

C'è un esempio su github con cui giocare.

Alcuni punti:

• Il piè di pagina cambierà con la vostra tavola. Quindi, se si mostra / nascondi colonne, spostarli, aggiungerne di nuove, aggiungere / rimuovere le righe, ordinare o utilizzare gli editor delle cellule in linea, il piè di pagina si aggiornerà l'interfaccia utente e le statistiche di conseguenza.
• È possibile aggiungere le righe a fondo pagina come ti piace, una riga per ogni statistica. Così com'è, si può avere media, mediana, somma, min, max, gamma, DEV.ST, varianza, o varianceUnbiased. 'Statistiche' La voce nella configurazione è un array: basta aggiungere le statistiche che desideri questo array (ad esempio stats: ["min", "median", "stdev"] ).
• Il piè di pagina tabella userà qualsiasi formattatori specificato per quella colonna.
• Se hai un paginator, è possibile scegliere se le statistiche visualizzate sono per l'intera tabella o solo la pagina attualmente visibile. Aggiungi pagedTotals: true al columnStats oggetto di disporre di statistiche pagina.
• La matrice di 'statistiche' nel config oggetto può includere anche letterali oggetto, con 'label' chiavi e 'fn'. fn è la funzione che calcola le statistiche - o una stringa come 'min' o una funzione che restituisce un numero. L'esempio a github mostra come si potrebbe fare di dati utilizzando una 'totale ponderato' da due colonne.

Maggiori informazioni sul codice attuale estensione

Il file principale, YAHOO_DataTable_colStats.js, aggiunge un paio di beni protetti al DataTable, un protetto alcuni metodi, e due metodi pubblici, colStatsRefresh che ricalcoleranno piè di pagina e ridisegnare la tavola, e colStatsGetRecordSet , che restituisce un array o di tutti record, o solo quelle visibili, a seconda del valore di pagedTotals . Il primo può essere utile se si apportano modifiche alla tabella che non vengono attivati ​​eventi utili (per esempio la modifica dei dati direttamente nel sottostante RecordSet), la seconda se si sta utilizzando funzioni di riepilogo personalizzato.

YAHOO_DataSource_patch.js aggiunge una parseField(key, value) metodo di DataSource. Questo è necessario quando si hanno gli editor delle cellule inline casella di testo per i dati numerici, l'editor restituisce una stringa, che non è analizzata automaticamente e quindi non può essere aggiunto. Il parseField fornisce l'accesso al parser specificato nel DataSource, per convertire i dati modificati.

YAHOO_util_Stats.js fornisce una standalone YAHOO.util.Stats classe che avvolge una (ordinati) array di dati numerici e fornisce le statistiche di riepilogo. E 'solo dipendenza è YAHOO.lang. Un esempio YAHOO.util.Stats è mantenuto dalla DataTable per ogni colonna che deve essere riassunte, e la cache di alcuni dei matematica più difficile da migliorare le prestazioni. Le stringhe passate alla matrice statistiche ('min', 'mediana', ecc) sono metodi della classe YAHOO.util.Stats, così si potrebbe facilmente aggiungere quelle supplementari aggiungendo al prototipo. Nota però che essi abbiano accesso solo ai dati di 'loro' colonna.

E, infine

Sono abbastanza sicuro che questo non è andare a lavorare con DataTable scorrimento, quindi non ho nemmeno provato! Ma se si trova dei problemi o delle idee, si prega di mettere sulla issue tracker github.

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!