Yahoo! User Interface Blog (YUIBlog)

Tabelle footer-Statistik für YUI 2 DataTable

13. Januar 2011 um 04.00 Uhr von Matt Parker | In Entwicklung | 2 Kommentare

Die YUI 2 DataTable nicht viel. Aber eines der Dinge, die es nicht tut, ist alles mit einem Tisch footer, wo Sie erwarten, Summen, Mittelwerte oder andere zusammenfassende Daten finden könnte. Also habe ich erweitert DataTable Übersichtsdaten für numerische Daten hinzuzufügen.

Getting it gehen

Erstens, es zu benutzen: Sie werden einen Code aus der Not github - es gibt drei js-Dateien, und du wirst sie alle auf Ihrer Seite brauchen nach dem YUI DataTable js-Datei. Und möchten Sie vielleicht, um den Namespace zu ändern - wir verwenden YAHOO.LPLT.DataTable wie die Erweiterung der YAHOO.widget.DataTable . Ich werde ein bisschen mehr erzählen über diese Dateien weiter unten.

Sie richten Ihre DataTable als normal, aber es gibt drei Dinge, die Sie tun müssen, um die Zusammenfassung zum Laufen zu bringen:

1. Achten Sie darauf, Ihre Datenquelle gibt "number" Parser für alle Felder die Sie zusammenfassen möchten, besonders wenn man dabei inline Zellbearbeitung sind:

     myDataSource.responseSchema = {fields: [
       {Key: "Menge", Parser: "Zahl"}
       / * Etc. ..  * /
    ]};
   

2. Fügen Sie eine config Schlüssel-Wert von columnStats: true in Ihre Spaltendefinition Array:

     var myColumnDefs = [
        {Key: "Menge", label: "Menge", columnStats: true} 
        / * Etc. ..  * /
    ];
   

   für die Spalten, die Sie zusammenfassen möchten. (Die Summe der 'id' Spalte ist wahrscheinlich nicht sehr hilfreich!).
3. Sagen Sie der Datentabelle, die Statistiken zu berechnen:

    var MyDataTable = new YAHOO.LPLT.DataTable ("exampleEl"
        myColumnDefs, 
        myDataSource 
        {ColumnStats: {on: true, Statistik: ['Summe']}}
    );
   

   Dies ist die einfachste Möglichkeit, um die Spalte Statistiken konfigurieren, aber Sie können zusätzliche Statistiken hinzuzufügen, passen Sie die Etiketten und vieles mehr.

Es ist ein Beispiel auf GitHub zu spielen.

Ein paar Punkte:

• Die Fußzeile wird mit Ihrer Tabelle zu ändern. Also, wenn Sie Anzeigen / Ausblenden von Spalten, sie verschieben, neue hinzufügen, Hinzufügen / Entfernen Zeilen zu sortieren, oder nutzen Inline-Zelle Redakteure, die Fußzeile zu aktualisieren die Benutzeroberfläche und die Statistiken entsprechend.
• Sie können so viele Zeilen in die Fußzeile hinzufügen, wie Sie, eine Zeile für jede Statistik, wie. Wie es aussieht, können Sie Mittelwert, Median, Summe, Minimum, Maximum, Spannweite, Standardabweichung, Varianz, oder varianceUnbiased. Die "Statistik" Element in der Konfiguration ist ein Array: fügen Sie einfach die Statistiken, die Sie zu diesem Array (z. B. möchten stats: ["min", "median", "stdev"] ).
• Die Tabelle Fußzeile verwendet alle Formatierer für diese Spalte angegeben.
• Wenn Sie eine paginator haben, können Sie wählen, ob die Statistiken gezeigt, für die gesamte Tabelle oder nur die aktuell sichtbare Seite sind. Add pagedTotals: true , um die columnStats Objekt zu Seite Statistiken haben.
• Die 'Stats' array in der Config-Objekt kann auch Objekt-Literale, mit den Tasten 'label' und 'fn'. fn ist die Funktion, dass die Statistiken berechnet werden - entweder ein String wie 'min' oder eine Funktion, die eine Zahl zurückgibt. Das Beispiel zeigt, wie github Sie tun können, eine "gewichtete Summe" mit Daten aus zwei Spalten.

Mehr über die tatsächliche Dateierweiterung

Die Hauptdatei, YAHOO_DataTable_colStats.js, fügt ein paar geschützte Eigenschaften, um die Datentabelle, ein paar geschützte Methoden und zwei öffentliche Methoden, colStatsRefresh die wird neu berechnet und zeichnet den Tisch Fußzeile und colStatsGetRecordSet , die ein Array zurückgibt entweder von allen Aufzeichnungen, oder nur diejenigen sichtbar, je nach dem Wert des pagedTotals . Die erste kann nützlich sein, wenn Sie Änderungen an der Tabelle, die nicht Feuer zu tun nützliche Ereignisse (z. B. direkt das Ändern von Daten in den zugrunde liegenden RecordSet) sind, die zweite, wenn Sie benutzerdefinierte Zusammenfassung Funktionen sind.

YAHOO_DataSource_patch.js fügt eine parseField(key, value) -Methode auf DataSource. Dies ist erforderlich, wenn textbox Inline-Zelle Editoren für numerische Daten haben, den Editor gibt einen String zurück, die nicht analysiert automatisch, und so kann nicht hinzugefügt werden. Die parseField bietet Zugriff auf die Parser in der DataSource angegeben, die editierten Daten zu konvertieren.

YAHOO_util_Stats.js bietet eine eigenständige YAHOO.util.Stats Klasse, die ein (sortiert) Array von numerischen Daten Wraps und bietet die zusammenfassende Statistik. Es ist nur die Abhängigkeit ist YAHOO.lang. Ein YAHOO.util.Stats Instanz wird durch die DataTable für jede Spalte, die zusammengefasst werden beibehalten wird, und speichert einige der schwierigeren Mathematik, um die Leistung zu verbessern. Die Saiten bestanden in der Statistik array ('min', 'mittlere' etc) werden Methoden der YAHOO.util.Stats Klasse, so könnten Sie leicht zusätzliche diejenigen, indem man dem Prototyp. Beachten Sie aber, dass sie nur Zugang zu "ihrer" Säule der Daten.

Und schließlich

Ich bin mir ziemlich sicher, dass dies nicht mit Scroll-Datentabellen arbeiten, also habe ich noch nicht einmal ausprobiert! Aber wenn Sie irgendwelche Probleme oder Ideen haben, bitte setzen sie auf die github issue tracker.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!