Yahoo! User Interface блог (YUIBlog)

В YUI 3 Галерея: Bulk Widget редактор

Плагин QuickEdit для YUI 3 DataTable позволяет легко редактировать всю страницу записей как атомарная операция. Однако, иногда вам нужно сделать еще больше. Например, вы можете иметь одновременно редактировать несколько записей, чем вы можете умещаться на одной странице. Или вы, возможно, потребуется поддержка добавления, копирования и удаления записей в рамках элементарной операции. Или вы, возможно, пожелает поля визуально группы, поместив их в одну ячейку таблицы. Массовые редактор виджет поддерживает все эти возможности.

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

Обзор

Массовые виджет Редактор состоит из трех компонентов:

Data source

Это завершает YUI DataSource, и управляет изменениями: вставки, удаления и изменения значения.

Base widget

Это обеспечивает базовую структуру для редактирования, управления записями и полей в каждой записи. Производные классы отвечают за оказание каждой записи в отдельную строку, которая может быть дел, TBODY или другой контейнер.

HTML table implementation

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

Конфигурация

В примере, который сгенерировал на скриншоте выше, конфигурация была сохранена как можно более простым:

fields определяет редактируемые значения в каждой записи. По умолчанию тип входа. Другие действительные типы выбора и текстового поля. (Выберите требуется список значений.) Основные проверки предоставляется Form Manager модуль галереи. Это покрывает необходимые поля, ограничения на длину и числовые диапазоны . Более сложная проверка может быть выполнена путем указания regex или ваши собственные функции ( fn ). Вот выдержка из живой пример:

 уаг поля =
 {
	 Название:
	 {
		 типа: "текстовой"
	 }
	 год:
	 {
		 проверки:
		 {
			 CSS: "yiv-целое: [1500,2100] '
		 }
	 }
	 Цвет:
	 {
		 типа: «Выбрать»,
		 значения:
		 [
			 {Значение: "красный", текст: 'Красный'},
			 {Значение: «зеленый», текст: 'Зеленые'},
			 {Значение: «синий», текст: "Blue"}
		 ]
	 }
 };

Y.BulkEditDataSource требуется экземпляр Y.DataSource и следующие параметры:

uniqueIdKey

Имя ключа, который однозначно идентифицирует каждую запись.

generateRequest

Функция для получения параметров запроса для Y.DataSource . (Это пустой в пример, потому что Y.DataSource.Local всегда возвращает все данные.)

extractTotalRecords

Функция для извлечения общее количество записей с Y.DataSource ответ.

Поскольку пример использует Y.DataSource.Local , totalRecordsReturnExpr также требуется. Это OGNL выражение определяет, где в ответ на хранение от общего числа записей. (Обратите внимание, что extractTotalRecords читает это значение).

 уаг DS = новый Y.BulkEditDataSource (
 {
	 DS: raw_ds,
	 uniqueIdKey: «идентификатор»,
	 GenerateRequest: функция () {},
	 totalRecordsReturnExpr: '. meta.totalRecords,
	 extractTotalRecords: функции (ответ)
	 {
		 вернуться response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor требуется источник данных, конфигурации поля, а в столбце конфигурации. В столбце конфигурации, ключ имя поля, если не указано пользовательское форматирования. Метка используется в качестве заголовка столбца. Вот выдержка из живой пример:

 уаг столбцов =
 [
	 {
		 ключ: «флажок»,
		 знака: "<input type="checkbox" id="select-all" />,
		 форматирования: функция (о)
		 {
			 уаг разметки = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('InnerHtml, Y.Lang.sub (разметка,
			 {
				 ID: this.getRecordId (o.record)
			 }));
		 }
	 }
	 {Ключ: "Название", этикетка: "Заголовок"},
	 {Ключ: 'год', этикетка: "Год"},
	 {Ключ: 'цвет', этикетка: «Цвет»}
 ];

(Заметим, что живой пример определяет незначительное расширение Y.HTMLTableBulkEditor обрабатывать флажок колонки).

Вы также можете передать экземпляр Y.Paginator в Y.BulkEditDataSource . Это проявляется в отдельных, более сложных живой пример .

Местное против удаленных источников данных

При принятии решения, следует ли использовать локальный или удаленный источник данных, необходимо тщательно рассмотреть вопрос о компромиссах. Очевидно компромисс в том, что местный источник данных происходит быстрее, когда разбиения на страницы, но первоначальная загрузка страницы займет больше времени и требует больше памяти на стороне клиента.

Массовые виджет редактор накладывает дополнительные компромиссы, однако.

Во-первых, YUI DataSource, должны вернуться неизменные данные. Это происходит автоматически по данным местных источников, но может быть сложным для реализации удаленных источников данных. Вам нужно будет блокировать строки в таблице базы данных на время операции массового редактирования, если более чем одному пользователю разрешается изменять их.

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

В реальном мире прецедентов

Исходным мотивом для массовых виджет Редактор было, чтобы после обработки загружены таблицы. Представляя пост-обработки шаг устраняет необходимость в таблице значения должна быть совершенной. Ошибки могут быть отмечены и зафиксированы в массовых виджет редактор, а не отказ от всей загрузки. Кроме того, обработка на сервере может делать лучше всего, предположение назначение дополнительных значений, необходимых для каждой записи, и пользователь может проверить и исправить эти дополнительные ценности перед сохранением. Это упрощает первоначальную создание таблицы.

В этом сценарии удаленного источника данных является лучшим выбором. Загруженные данные хранятся в рабочее пространство, и поэтому гарантированно неизменными, так как никакой другой пользователь не может видеть. "Все или ничего" экономии уместно: После того как все ошибки были исправлены, операция сохранения атомной, так же, как стандартные операции загрузки.

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

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

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