Usuário Yahoo! interface Blog (YUIBlog)

Formatando data com YUI - Parte II

Na Parte I , vimos como formatar uma data usando YUI formatador de data. Na Parte II, vamos ver como formatar datas para um caso de uso específico - dentro do DataTable controle.

DataTables são uma grande ferramenta para a apresentação de todos os tipos de dados para os usuários do seu site, incluindo as datas. Como vimos na Parte I, o formatador data faz com que seja fácil de transformar um objeto Date em uma string formatada. Para este exemplo, vamos dar DataTable Exemplo básico e adicionar um formatador de datas personalizado para ele. Vamos começar com o inclui temos:

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

 <! - Individual arquivos YUI 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> 

Em seguida, vamos adicionar marcação para introduzir um formato definido pelo usuário e para desencadear uma DataTable redesenhar:

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

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

A chave aqui é definir um formatador de datas personalizado:

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

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

E, finalmente, aqui está o JavaScript para criar o DataTable. Note que ponto o formatador para a coluna "Data" com a nossa:

 YAHOO.example.Data = {bookorders: [id {: "po-0167", data: new Date (1980, 2, 24), quantidade: 1 quantidade: 4}, {id: "po-0783", data : new Date ("03 de janeiro de 1983"), quantidade: quantidade nula: 12,12345}, {id: "po-0297", data: new Date (1978, 11, 12), quantidade: 12, valor: 1,25} , {id: "po-1482", data: new Date ("11 março de 1985"), quantidade: 6, quantidade: 3,5}]}; var myColumnDefs = [{chave: "id", classificável: true}, {chave: "date", formatador: YAHOO.example.DateFormatter.formatDate, sortable: true, sortOptions: {DefaultDir: YAHOO.widget.DataTable.CLASS_DESC}}, {-chave: "quantidade", formatador: YAHOO.widget.DataTable . FormatNumber, sortable: true}, {-chave: "quantidade", formatador: YAHOO.widget.DataTable.formatCurrency, sortable: true}]; var mydatasource = new YAHOO.util.DataSource (YAHOO.example.Data.bookorders); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = {campos: ["id", "date", "quantidade", "quantidade"]}; var MyDataTable = new YAHOO.widget.DataTable ("basic ", myColumnDefs, mydatasource); 

Para o nosso exemplo, vamos incluir também um manipulador de eventos para redesenhar a tabela quando o "redesenho" botão é clicado:

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

Juntando tudo, temos um DataTable com formatação de data customizeable .

Neste exemplo, o nosso DataSource contém objetos Date real. Isto não é estritamente necessário. Para uma aplicação para apoiar a internacionalização, data / hora informações devem ser armazenados e transmitidos em UTC. Por exemplo, se os seus dados reside em seu servidor como um DATETIME campo em um banco de dados MySQL, então a melhor maneira de convertê-lo para um timestamp Unix é usar o UNIX_TIMESTAMP() função:

 SELECT id, UNIX_TIMESTAMP (pubdate) AS data, quantidade, valor FROM bookorders;

Outros bancos de dados têm seu próprio método de extracção de um timestamp Unix.

O conjunto de resultados pode ser codificado JSON usando um do lado do servidor biblioteca JSON no idioma de sua escolha, antes de ser passado de volta para o navegador. Em PHP, faríamos algo como isto:

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

No lado do cliente, nós receber estes dados usando um XHRDataSource :

 var mydatasource = YAHOO.util nova XHRDataSource ("http://hostname/your/script.php.");
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON.;
 / / Veja o DataSource documentação para mais detalhes

Desde os seus dados vem como JSON a partir do servidor, você está provavelmente melhor fora passando datas em timestamps como Unix e usando o construtor Date dentro de seu formatador:

 YAHOO.example.Data = {
     "Bookorders ': [
         {Id: "po-0167", data: 320227200, quantidade: 1 quantidade: 4},
         {Id: "po-0783", data: 410428800, quantidade: null, valor: 12,12345},
         {Id: "po-0297", data: 279705600, quantidade: 12, valor: 1,25},
         {Id: "po-1482", data: 479376000, quantidade: 6, quantidade: 3,5}
     ]
 };

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

	 var Odate = new Date (OData * 1000);

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

Note que multiplicamos o timestamp Unix em 1000 porque o Unix timestamps que recebemos foram em segundos, enquanto o construtor Date requer milissegundos.

Isso é tudo por agora. Na Parte III, vamos olhar para formatação de datas no controle de gráficos .

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!