Yahoo! Пользовательский интерфейс блог (YUIBlog)

Дата Форматирование с YUI - Часть II

В части I , мы увидели, как формат даты, используя дату форматирования YUI's. В части II, мы будем смотреть на форматирование даты для конкретного случая использования - в DataTable управления.

DataTables являются отличным инструментом для представления всех типов данных, которые пользователи вашего сайта, включая даты. Как мы видели в Части I, дата форматирования позволяет легко трансформировать объект дату в отформатированную строку. Для этого примера, мы будем принимать DataTable в Базовый пример и добавить пользовательский форматирования даты к нему. Мы начнем с включает нам нужно:

 <! - Индивидуальные YUI CSS файлы -> 
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

 <! - Индивидуальные 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> 

Далее, мы добавим разметки для ввода пользовательского формата и для запуска DataTable перерисовывать:

 <label> Формат: <input type="text" id="date-format" value="%b %d %Y" size="30"> </ ярлык> <ввод типа = "Кнопка" ID = "оказывают стол "Значение =" Обновить ">

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

Ключевым моментом здесь является определение пользовательского форматирования даты:

 YAHOO.namespace ("YAHOO.example.DateFormatter");
 YAHOO.example.DateFormatter.formatDate = функция (Elcell, oRecord, oColumn, OData) {
	 var эль = document.getElementById ("дата-формат");
	 var sFormat = el.value;

	 var ул = YAHOO.util.Date.format (OData, {формате: sFormat});
	 elCell.innerHTML ул =;
 }

И, наконец, вот JavaScript для создания DataTable. Отметим, что точки для форматирования "дата" колонки к нашему:

 YAHOO.example.Data = {
     bookorders: [
         {ID: "ПО-0167", дата: новая дата (1980, 2, 24), количество: 1, количество: 4},
         {ID: "ПО-0783", дата: новые Дата ("3 января 1983"), количество: нуль, количество: 12,12345}
         {ID: "ПО-0297", дата: новая дата (1978, 11, 12), количество: 12, объем: 1,25}
         {ID: "ПО-1482", дата: новые Дата ("11 марта 1985"), количество: 6, количество: 3.5}
     ]
 };

 var myColumnDefs = [
	 {Ключ: "ID", сортировки: истинный}
	 {Ключ: "Дата", форматирования: YAHOO.example.DateFormatter.formatDate,
			 сортировки: правда, sortOptions: {DEFAULTDIR: YAHOO.widget.DataTable.CLASS_DESC}}
	 {Ключ: "количество", форматирования: YAHOO.widget.DataTable.formatNumber, сортировки: истинный}
	 {Ключ: "Сумма", форматирования: YAHOO.widget.DataTable.formatCurrency, сортировки: истинный}
 ];

 var myDataSource = новый YAHOO.util.DataSource (YAHOO.example.Data.bookorders);
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema = {
	 поля: ["ID", "Дата", "количество", "количество"]
 };

 var Mydatatable = новый YAHOO.widget.DataTable ("основные", myColumnDefs, myDataSource);

Для нашего примера, мы будем также включать обработчик событий для перерисовки таблицы, когда "Обновить" нажатии кнопки:

 YAHOO.util.Event.addListener ("оказать стол", "клик", myDataTable.render, Mydatatable, TRUE);

Собираем все вместе, мы получаем DataTable с Настраиваемые форматирования даты .

В этом примере, наш DataSource проводит реальных объектов Дата. Это не является строго обязательным. Для приложения для поддержки интернационализации, дата / время информация должна быть сохранена и передана в UTC. Например, если ваши данные хранятся на сервере, как DATETIME поля в базе данных MySQL, то лучший способ преобразовать его в метку времени является использование UNIX_TIMESTAMP() функции:

 SELECT ID, UNIX_TIMESTAMP (pubdate) как дата, количество, сумма bookorders ОТ;

Другие СУБД имеют свои собственные методы извлечения метку времени.

Результат может быть JSON кодируются с использованием библиотеки серверных JSON в выбранном вами языке, прежде чем он передается обратно в браузер. В PHP, мы хотели сделать что-то вроде этого:

 $ Bookorders = Array ();
 а ($ = строка mysql_fetch_assoc ($ результатов))
 {
	 $ Bookorders [] = $ строки;
 }
 заголовок ("Content-Type: применение / JSON");
 Эхо json_encode ($ bookorders);

На стороне клиента, мы будем получать эти данные используя XHRDataSource :

 var myDataSource = новый YAHOO.util). XHRDataSource ("http://hostname/your/script.php";
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON.
 / / См. DataSource документации для подробной информации

Так как данных поставляется в качестве JSON с сервера, вы, вероятно, лучше проходящей даты в качестве Unix метки и использовании Дата конструктор внутри форматирования:

 YAHOO.example.Data = {
     "Bookorders": [
         {ID: "ПО-0167", дата: 320227200, количество: 1, количество: 4},
         {ID: "ПО-0783", дата: 410428800, количество: нуль, количество: 12,12345}
         {ID: "ПО-0297", дата: 279705600, количество: 12, объем: 1,25}
         {ID: "ПО-1482", дата: 479376000, количество: 6, количество: 3,5}
     ]
 };

 YAHOO.example.DateFormatter.formatDate = функция (Elcell, oRecord, oColumn, OData) {
	 var эль = document.getElementById ("дата-формат");
	 var sFormat = el.value;

	 var Odate = новая дата (OData * 1000);

	 var ул = YAHOO.util.Date.format (Odate, {формате: sFormat});
	 elCell.innerHTML ул =;
 }

Обратите внимание, что мы умножим метку времени на 1000, потому Unix метки мы получили были в считанные секунды, в то время как конструктор Дата требует миллисекунд.

Вот и все пока. В части III, мы будем смотреть на форматирование даты в контрольных карт .

Найти разговоры: Bloglines | Technorati

Доля и расширить: закладки с del.icio.us | Digg это! | Reddit!