Inizio Blog User Interface (YUIBlog)

Data di formattazione con YUI - Parte II

In parte I , abbiamo visto come formattare una data con data formattatore di YUI. Nella parte II, vedremo formattazione di date per un caso d'uso specifica - all'interno della DataTable controllo.

DataTable sono un ottimo strumento per presentare tutti i tipi di dati agli utenti del tuo sito web, comprese le date. Come abbiamo visto nella Parte I, il formattatore data lo rende facile trasformare un oggetto Date in una stringa formattata. Per questo esempio, prenderemo DataTable esempio di base e aggiungere una data di formattazione personalizzata. Si comincerà con l'comprende abbiamo bisogno di:

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

 <-! Individuali YUI file JS -> 
 <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> 

Successivamente, si aggiungerà markup per introdurre un formato definito dall'utente e ad innescare un DataTable ridisegnare:

 <label> Formato: <input id="date-format" type="text" value="%b %d %Y" size="30"> </ label> <input type = "button" id = "render -"value =" Ridisegna tavolo ">

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

La chiave è qui per definire una formattazione personalizzata data:

 YAHOO.namespace ("YAHOO.example.DateFormatter");
 YAHOO.example.DateFormatter.formatDate = function (elCell, oRecord, oColumn, oData) {
	 var el = document.getElementById ("date-format");
	 sFormat var = el.value;

	 var str = YAHOO.util.Date.format (oData, {formato: sFormat});
	 elCell.innerHTML = str;
 }

E infine, ecco il codice JavaScript per creare il DataTable. Si noti che segnaliamo il formattatore per la colonna "data" per la nostra:

 YAHOO.example.Data = {bookorders: [{id: "Po-0167", data: new Date (1980, 2, 24), la quantità: 1, importo: 4}, {id: "Po-0783", data : importo null,:: new Date ("3 gen 1983"), quantità 12,12,345 mila}, {id: "Po-0297", data: new Date (1978, 11, 12), la quantità: 12, importo: 1,25} , {id: "Po-1482", data: new Date ("11 marzo 1985"), la quantità: 6, importo: 3,5}]}; myColumnDefs var = [{chiave: "id", ordinabile: true}, {chiave: "data", formattatore: YAHOO.example.DateFormatter.formatDate, ordinabili: vero, sortOptions: {DefaultDir: YAHOO.widget.DataTable.CLASS_DESC}}, {chiave: "quantità", di formattazione: YAHOO.widget.DataTable . FormatNumber, ordinabili: true}, {chiave: "importo", formattatore: YAHOO.widget.DataTable.formatCurrency, ordinabili: true}]; MyDataSource var = new YAHOO.util.DataSource (YAHOO.example.Data.bookorders); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = {fields: ["id", "data", "quantità", "importo"]}; MyDataTable var = YAHOO.widget.DataTable nuovo ("di base "myColumnDefs, MyDataSource); 

Per il nostro esempio, avremo anche un gestore di eventi per ridisegnare il tavolo quando il pulsante "Ridisegna" viene cliccato:

 YAHOO.util.Event.addListener ("render-tabella", "click", myDataTable.render, MyDataTable, true);

Mettere tutto insieme, otteniamo una DataTable con formattazione data personalizzabile .

In questo esempio, il nostro attuale DataSource contiene oggetti Date. Questo non è strettamente necessario. Per un'applicazione per supportare l'internazionalizzazione, informazioni su data e ora devono essere conservati e trasmessi in UTC. Per esempio, se i dati risiede sul server come DATETIME campo in un database MySQL, quindi il modo migliore per convertirlo in un timestamp Unix è quello di utilizzare il UNIX_TIMESTAMP() funzione:

 SELECT id, UNIX_TIMESTAMP (pubdate) la data, la quantità dalla quantità bookorders,;

Altri motori di database hanno un proprio metodo di estrazione di un timestamp Unix.

Il set di risultati possono poi essere JSON codificati utilizzando una libreria JSON server-side in lingua di propria scelta, prima che sia passato al browser. In PHP, ci piacerebbe fare qualcosa del genere:

 $ Bookorders = array ();
 while ($ row = mysql_fetch_assoc ($ risultati))
 {
	 $ Bookorders [] = $ riga;
 }
 header ("Content-type: application / json");
 echo json_encode ($ bookorders);

Sul lato client, ci piacerebbe ricevere tali dati utilizzando un XHRDataSource :

 var = new MyDataSource YAHOO.util). XHRDataSource ("http://hostname/your/script.php";
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON.
 / / Vedere la documentazione DataSource per tutti i dettagli

Poiché i dati è disponibile in formato JSON dal server, probabilmente stai meglio passando date in forma di timestamp Unix e utilizzando il costruttore Data all'interno di formattazione:

 YAHOO.example.Data = {
     "Bookorders ': [
         {Id: "Po-0167", data: 320.227.200, quantità: 1, importo: 4},
         {Id: "Po-0783", data: 410.428.800, quantità: null, importo: 12,12,345 mila},
         {Id: "Po-0297", data: 279.705.600, quantità: 12, importo: 1.25},
         {Id: "Po-1482", data: 479.376.000, la quantità: 6, importo: 3,5}
     ]
 };

 YAHOO.example.DateFormatter.formatDate = function (elCell, oRecord, oColumn, oData) {
	 var el = document.getElementById ("date-format");
	 sFormat var = el.value;

	 Odate var = new Date (oData * 1000);

	 var str = YAHOO.util.Date.format (Odate, {formato: sFormat});
	 elCell.innerHTML = str;
 }

Si noti che si moltiplicano le timestamp Unix del 1000 perché il timestamp Unix che abbiamo ricevuto sono stati in pochi secondi, mentre il costruttore richiede Data millisecondi.

Questo è tutto per ora. Nella Parte III, vedremo formattazione di date nel controllo Charts .

Trova conversazioni: bloglines | technorati

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