Yahoo! User Interface Blog (YUIBlog)

Datum Formatieren mit YUI - Teil II

In Teil I , sahen wir, wie man ein Datum-Format mit YUI-Datum Formatter. In Teil II werden wir bei Blick auf Formatierung von Daten für eine bestimmte Verwendung - innerhalb der DataTable Kontrolle.

DataTables sind ein großes Werkzeug für die Präsentation aller Arten von Daten zu den Nutzern Ihrer Website, einschließlich der Termine. Wie wir in Teil I gesehen haben, macht das Datum Formatter es einfach, ein Date-Objekt in einen formatierten String zu verwandeln. Für dieses Beispiel nehmen wir DataTable's Basic-Beispiel , und fügen Sie ein benutzerdefiniertes Datum Formatter es. Wir sind mit dem müssen wir beginnen:

 <! - Individuelle YUI CSS-Dateien -> 
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

 <! - Individuelle YUI JS-Dateien -> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"> </ script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"> </ script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"> </ script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"> </ script> 

Als Nächstes fügen wir Markup zur Eingabe eines benutzerdefinierten Format und eine DataTable Neuzeichnen auslösen:

 <label> Format: <input type="text" id="date-format" value="%b %Y" size="30"> </ label> <input type %d = "button" id = "machen -Tabelle "value =" Redraw ">

 <div id="basic"> </ div>

Der Schlüssel hier ist, um eine benutzerdefinierte Formatter Zeitpunkt zu definieren:

 YAHOO.namespace ("YAHOO.example.DateFormatter");
 YAHOO.example.DateFormatter.formatDate = function (elCell, oRecord, oColumn, oData) (
	 var el = document.getElementById ("Datum-Format");
	 var = sformat el.value;

	 var str = YAHOO.util.Date.format (oData, (format: sformat));
	 elCell.innerHTML = str;
 )

Und schließlich ist hier die JavaScript um die DataTable erstellen. Beachten Sie, dass wir den Formatierer für das "Datum"-Spalte, um unseren eigenen Standpunkt:

 YAHOO.example.Data = (bookorders: [(id: "po-0167", Datum: new Date (1980, 2, 24), Menge: 1, Höhe: 4), (id: "po-0783", Datum : new Date ("3. Januar 1983"), Menge: null, Betrag: 12,12345), (id: "po-0297", Datum: new Date (1978, 11, 12), Menge: 12, Höhe: 1,25) , (id: "po-1482", Datum: new Date ("11. März 1985"), Menge: 6, Höhe: 3,5)]); var myColumnDefs = [(key: "id", sortierbar: true), (key: "date", Formatter: YAHOO.example.DateFormatter.formatDate, sortierbar: true, sortOptions: (DefaultDir: YAHOO.widget.DataTable.CLASS_DESC)), (key: "Menge", Formatter: YAHOO.widget.DataTable . FormatNumber, sortierbar: true), (key: "Betrag", Formatter: YAHOO.widget.DataTable.formatCurrency, sortierbar: true)]; var myDataSource = new YAHOO.util.DataSource (YAHOO.example.Data.bookorders); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = (fields: ["id", "Datum", "Menge", "Betrag"]); var MyDataTable = new YAHOO.widget.DataTable ("basic "myColumnDefs, myDataSource); 

Für unser Beispiel werden wir auch einen Event-Handler an den Tisch, wenn die "Redraw"-Button geklickt wird neu gezeichnet:

 YAHOO.util.Event.addListener ("Render-Tabelle", "Klick", myDataTable.render, MyDataTable, true);

Dass sie alle zusammen, wir bekommen ein DataTable mit customizeable Datum formatieren .

In diesem Beispiel unsere DataSource hält tatsächlichen Datum der Objekte. Dies ist nicht unbedingt erforderlich ist. Für einen Antrag auf Unterstützung von Internationalisierung, Datum / Uhrzeit Informationen sollten gespeichert und übermittelt werden in UTC. Zum Beispiel, wenn Sie Ihre Daten auf Ihren Server als DATETIME -Feld in einer MySQL-Datenbank, dann der beste Weg, timestamp wandeln es in ein Unix ist die Verwendung UNIX_TIMESTAMP() -Funktion:

 SELECT id, UNIX_TIMESTAMP (pubdate) AS Datum, Menge, Betrag FROM bookorders;

Andere Datenbank-Engines haben eine eigene Methode zur Gewinnung von einem Unix-Timestamp.

Das Ergebnis kann dann eingestellt werden, JSON kodiert mit einem Server-seitigen JSON-Bibliothek in der Sprache Ihrer Wahl, bevor es zurück an den Browser übergeben wird. In PHP, würden wir so etwas wie dieses:

 $ Bookorders = array ();
 while ($ row = mysql_fetch_assoc ($ results))
 (
	 $ Bookorders [] = $ row;
 )
 header ("Content-Type: application / json");
 echo json_encode ($ bookorders);

Auf der Clientseite, würden wir erhalten mit Hilfe dieser Daten ist eine XHRDataSource :

 var = new myDataSource YAHOO.util. XHRDataSource ("http://hostname/your/script.php");
 myDataSource.responseType = YAHOO.util.DataSource. TYPE_JSON;
 / / Siehe DataSource-Dokumentation für weitere Informationen

Da Ihre Daten als JSON kommt vom Server, sind Sie wahrscheinlich besser dran vorbei Termine als Unix-Zeitstempel und mit dem Datum in Ihrem Konstruktor Formatter:

 YAHOO.example.Data = (
     "Bookorders": [
         (Id: "po-0167", Datum: 320227200, Menge: 1, Höhe: 4),
         (Id: "po-0783", Datum: 410428800, Menge: null, Betrag: 12,12345)
         (Id: "po-0297", Datum: 279705600, Menge: 12, Höhe: 1,25)
         (Id: "po-1482", Datum: 479376000, Menge: 6, Höhe: 3,5)
     ]
 );

 YAHOO.example.DateFormatter.formatDate = function (elCell, oRecord, oColumn, oData) (
	 var el = document.getElementById ("Datum-Format");
	 var = sformat el.value;

	 var Odate = new Date (oData * 1000);

	 var str = YAHOO.util.Date.format (Odate, (format: sformat));
	 elCell.innerHTML = str;
 )

Beachten Sie, dass wir die Unix-Zeitstempel mit 1000 zu multiplizieren, da die Unix-Zeitstempel erhielten wir waren in Sekunden, während der Konstruktor Date erfordert Millisekunden.

Das war's für heute. In Teil III werden wir den Blick auf Formatierung von Daten in Charts Kontrolle .

Finden Gespräche: Bloglines | technorati

Sagen und erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!