Interface utilisateur Blog Yahoo! (YUIBlog)

Date de mise en forme avec YUI - Partie II

Dans la partie I , nous avons vu comment mettre en forme une date par date de mise en forme de YUI. Dans la deuxième partie, nous allons voir les dates de mise en forme un cas d'utilisation spécifiques - à l'intérieur du DataTable contrôle.

DataTables sont un excellent outil pour présenter tous les types de données aux utilisateurs de votre site Web, y compris les dates. Comme nous l'avons vu dans la Partie I, le formateur de date, il est facile de transformer un objet Date en une chaîne formatée. Pour cet exemple, nous allons prendre DataTable Exemple de base et ajouter un formateur de date personnalisées. Nous allons commencer avec le comprend nous avons besoin:

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

 <-! Individuels YUI fichiers 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> 

Ensuite, nous allons ajouter du balisage à l'entrée d'un format défini par l'utilisateur et de déclencher un DataTable redessiner:

 <label> Format: <input type="text" id="date-format" value="%b %d %Y" size="30"> </ label> <input type = "button" id = "render -table "value =" Actualiser "<> <div id="basic"> / div> 

La clé ici est de définir une date de mise en forme personnalisée:

 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, {format: sformat});
	 elCell.innerHTML str =;
 }

Et enfin, voici le JavaScript pour créer le DataTable. Notez que nous soulignons le formateur pour la colonne «Date» à la nôtre:

 YAHOO.example.Data = {
     bookorders: [
         {Id: "po-0167", date: nouvelle date (1980, 2, 24), quantité: 1, montant: 4},
         {Id: "po-0783", date: new Date ("Janvier 3, 1983"), la quantité: null, le montant: 12.12345},
         {Id: "po-0297", date: nouvelle date (1978, 11, 12), quantité: 12, montant: 1,25},
         {Id: "po-1482", date: new Date ("Mars 11, 1985"), quantité: 6, le montant: 3,5}
     ]
 };

 myColumnDefs var = [
	 {Key: "id", sortable: true},
	 {Clés: "date", formateur: YAHOO.example.DateFormatter.formatDate,
			 sortOptions vrai,:: {triable DefaultDir: YAHOO.widget.DataTable.CLASS_DESC}},
	 {Clés: la «quantité», formateur: YAHOO.widget.DataTable.formatNumber, sortable: true},
	 {Clé: «montant», formateur: YAHOO.widget.DataTable.formatCurrency, sortable: true}
 ];

 var = new MyDataSource YAHOO.util.DataSource (YAHOO.example.Data.bookorders);
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema = {
	 domaines: ["id", "date", "quantité", "montant"]
 };

 MyDataTable var = YAHOO.widget.DataTable nouvelle («de base», myColumnDefs, MyDataSource);

Pour notre exemple, nous allons également inclure un gestionnaire d'événements pour redessiner la table lorsque les "Redraw" clique sur le bouton:

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

Mettre tout cela ensemble, nous obtenons un DataTable avec formatage date personnalisable .

Dans cet exemple, notre source de données contient des objets réels Date. Ce n'est pas strictement nécessaire. Pour une demande de soutien à l'internationalisation, la date / heure doit être conservé et transmis dans UTC. Par exemple, si vos données réside sur votre serveur en tant que DATETIME champ dans une base de données MySQL, puis la meilleure façon de le convertir en un timestamp Unix est d'utiliser le UNIX_TIMESTAMP() fonction:

 SELECT id, UNIX_TIMESTAMP (pubdate) que la date, la quantité, bookorders de la quantité;

Autres moteurs de bases de données ont leur propre méthode d'extraction d'un timestamp Unix.

Le résultat peut ensuite être encodé JSON en utilisant une bibliothèque de JSON côté serveur dans la langue de votre choix, avant qu'il ne soit transmis au navigateur. En PHP, nous ferions quelque chose comme ceci:

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

Sur le côté client, nous aimerions recevoir ces données en utilisant un XHRDataSource :

 var = new MyDataSource YAHOO.util). XHRDataSource ("http://hostname/your/script.php";
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON.
 / / Voir DataSource documentation pour plus de détails

Depuis vos données est disponible en tant que JSON à partir du serveur, vous êtes probablement mieux passer les dates en tant que timestamp Unix et l'aide du constructeur Date intérieur de votre formateur:

 YAHOO.example.Data = {
     "Bookorders ': [
         {Id: "po-0167", date: 320227200, quantité: 1, montant: 4},
         {Id: "po-0783", date: 410428800, quantité: null, le montant: 12,12345},
         {Id: "po-0297", date: 279705600, quantité: 12, montant: 1,25},
         {Id: "po-1482", date: 479376000, quantité: 6, le montant: 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 (1000 * oData);

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

Notez que nous multiplions le timestamp Unix de 1000 parce que les timestamps Unix nous avons reçues étaient en quelques secondes, alors que le constructeur Date exige millisecondes.

C'est tout pour maintenant. Dans la partie III, nous allons examiner de mise en dates dans le contrôle de graphiques .

Trouver des conversations: bloglines | technorati

Partager et prolonger: Ajouter aux Favoris del.icio.us | Digg it! | reddit!