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

Treeble с YUI 3 DataTable

Бета-версии DataTable в YUI 3.3.0 дает нам очень мощный компонент, чтобы играть. Чтобы начать шин в полезный способ, я решил обновить свой ​​Treeble примеры использования DataTable. (Treeble позволяет отображать иерархические данные в таблице .)

К моему большому удовольствию, это был ветер! Вся тяжелая работа выполняется в TreebleDataSource , который простирается YUI 3 DataSource, поэтому все, что мне нужно было подключить его к DataTable с помощью Y.Plugin.DataTableDataSource а затем настроить колонки:

 уаг DS = Y. новых TreebleDataSource (...),
	 пг = новый Ю. метранпаж (...),
	 таблице;

 Функция SendRequest () {
	 table.datasource.load ({
		 запрос: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 });
 }

 уаг COLS = [
     {Ключ: "yui33-хак", этикетка:''},
     {
         ключ: 'treeblenub ", этикетка:'',
         форматирования: Y.Treeble.buildTwistdownFormatter (SendRequest)
     },
     {
         ключ: 'название', этикетке: "Заголовок",
         форматирования: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 таблице = новый Y.DataTable.Base ({columnset: COLS});
 table.plug (Y.Plugin.DataTableDataSource, {источник данных: DS});

Чтобы увидеть полный исходный код, обратитесь к живой пример .

Только мухи в бочке меда являются:

• Yui33-хак колонке. В связи с ошибкой в YUI 3.3.0 DataTable , td элемента передается колонки форматирования на самом деле из предыдущей колонки. Таким образом, первая колонка в таблице отображаются twistdown, а второй столбец пуст.
• Неопределенные значения в данные отображаются в виде {value} вместо пробелов ( ошибка 2529858 ).

Для того, чтобы Treeble проще в использовании, я добавил кожи Сэм, какие стили в CSS классы выписанных Y.Treeble форматирования.

Наслаждайтесь!

Об авторе: Джон Линдал ( @ jafl5272 на Twitter) является одним из ведущих инженеров строительства фундамента, на котором Yahoo! APT построен. Ранее он работал в сети Издатель Yahoo.

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

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