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

Фильтрации данных, отображаемых YUI 3 DataTable

В дополнение к сортировке, который поддерживается YUI 3 DataTable , часто бывает полезно иметь возможность фильтровать данные и отобразить подмножество доступных строк. Query Builder виджет в YUI 3 Галерея предоставляет пользовательский интерфейс для построения простого фильтра.

( Нажмите на скриншот, чтобы играть с этим примером .)

История

Первая версия была написана коллегой, работающим со мной в сети Yahoo! Publisher (YPN). (. Он ушел вскоре после этого попытаться честным занятости после прецедента, созданного Джейми Zawinski, он открыл паб, чтобы продавать пиво -!. Дома варили, не менее Но я отвлекся ...) После взлома вместе Первая версия Query Builder, он сделал Ошибка показать его мне. Несколько дней спустя, он жаловался: "Вы переписали все это!" На самом деле, я переписал ее несколько раз за эти годы. YPN больше нет, но последние YUI 2 версии запроса полномочия Builder все данные таблицы в APT , отображать рекламную платформу управления Yahoo. Порт YUI 3 на самом деле наименьшее количество работы, которую я должен был сделать для создания новой версии!

Как пример работает

Ядро пример (1) запрос конфигурации Builder, который определяет, как пользователь может фильтровать данные, и (2) расширение Y.DataSource.Local который реализует фильтр. (Для сервера нумерацию страниц стороны, вы должны отправить фильтрации данных на сервер и выпекать его в ваш запрос.)

Для настройки Query Builder, пример сначала определяет список переменных, которые могут быть отфильтрованы:

 уаг var_list =
 [
	 {
		 Название: «заглавие»,
		 Тип: 'строка',
		 текст: "Заголовок"
	 },
	 {
		 имя: 'год',
		 типа: "число",
		 текст: «Год»,
		 Проверка: "yiv-целое: [0,2100] '
	 },
	 {
		 Название: «количество»,
		 типа: "число",
		 Текст: «Количество»,
		 Проверка: "yiv-целое: [0,] '
	 }
 ];

Каждая переменная присваивается имя (соответствующий ключ в конфигурации столбце DataTable) и типа. По умолчанию типа 'строка', 'число', и «Выбрать», но вы можете расширить это путем создания собственных модулей ( см. ниже ). Для каждого типа, которые вы используете, вы должны также определить набор операторов:

 уаг Ops =
 {
	 строка:
	 [
		 {Значение: 'содержит', текст: 'Содержит'},
		 {Значение: 'начинается-с ", текст:' Начинается с '},
		 {Значение: «концы-с", текст: "Заканчивается '}
	 ]

	 номер:
	 [
		 {Значение: "равны", текст: '='},
		 {Значение: "меньше", текст: '<='},
		 {Значение: "большим", текст: '> ='}
	 ]
 };

Это определяет операторы, которые пользователь может применяться к каждой переменной типа. (Если вам нужны различные наборы операторов для переменных одного и того же фундаментального типа, можно клонировать типа. Смотри плагины ниже.)

Ю. FormManager используется для проверки значений, введенных пользователем перед применением фильтра. Проверки ключа для каждой переменной в вышеуказанной конфигурации построитель запросов CSS предоставляет данные, которые интерпретируются Ю. FormManager.

Если все проверки проходят, запрос посылается источнику данных. Расширение Y.DataSource.Local довольно просто. Он просто фильтрует данные, прежде чем вернуться результаты:

 Y.extend (CustomDataSource, Y.DataSource.Local,
 {
	 _defDataFn: функция (д)
	 {
		 уаг данных = FilterData (e.data, e.request.filter);
		 уаг ответ =
		 {
			 Результаты: data.slice (e.request.recordOffset,
						 e.request.recordOffset + e.request.rowsPerPage),
			 Мета:
			 {
				 totalRecords: data.length
			 }
		 };

		 this.fire ("ответ", Y.mix ({ответ: ответ}, е));
	 }
 });

filter элемент запроса получается из QueryBuilder.toDatabaseQuery() , которая возвращает список [variable, operator, value] кортежей. Также отметим, что ответ должен включать в себя информацию об общем количестве записей, поскольку это изменения, основанные на фильтр применяется.

filterData() просто перебирает кортежи из toDatabaseQuery() , применив фильтр операторы, определенные в две таблицы поиска уровне:

 уаг фильтры =
 {
	 строка:
	 {
		 содержит: функция (значение, фильтр)
		 {
			 возвращение (value.indexOf (фильтр)> = 0);
		 },
		 "Начинается-с ': функция (значение, фильтр)
		 {
			 возвращение (value.substr (0, filter.length) == фильтр);
		 },
		 «Концы-с ': функция (значение, фильтр)
		 {
			 возвращение (value.substr (-filter.length) == фильтр);
		 }
	 },

	 номер:
	 {
		 равны: функция (значение, фильтр)
		 {
			 возвращение (ParseInt (значение, 10) == ParseInt (фильтр, 10));
		 },
		 меньше: функция (значение, фильтр)
		 {
			 возвращение (ParseInt (значение, 10) <= ParseInt (фильтр, 10));
		 },
		 больше: функция (значение, фильтр)
		 {
			 возвращение (ParseInt (значение, 10)> = ParseInt (фильтр, 10));
		 }
	 }
 };

После всего этого, DataTable просто отображает то, что он получает от источника данных.

Плагины

Y.QueryBuilder.plugin_mapping определяет отображение имен типов фактических классов. Вы можете увеличить это отображение в двух направлениях:

1. Клон существующего типа, определяя новое название для того же класса. Это позволяет различные наборы операторов для различных переменных одного и того же основного типа.
2. Создание нового типа, реализовав плагин API . Изучение исходного кода для существующих плагинов является лучшим способом, чтобы почувствовать, как эта API работает.

Обобщая Query Builder

Query Builder не поддерживает скобки, так что вы можете и все условия или ИЛИ всех условиях. Хотя вполне возможно, введения в скобках графическое представление логическое выражение, все проекты, которые я видел, слишком громоздки для использования. Текстовое представление намного проще и легче манипулировать. Expression Builder включает в Query Builder в виджет, который позволяет построить текстовое представление без необходимости помнить синтаксис или типа все от руки.

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

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

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