jqGrid, форма с автозавершением и поиск

Владимир | | Ajax, JavaScript, Web разработка.

Сегодня будет еще один небольшой пример работы с jqGrid. Я покажу каким образом можно заполнить форму поиска значениями по-умолчанию.

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

Схема простая и удобная, но ее может оказаться не достатчно если нужно проводить поиск одновременно по нескольким полям.

Поэтому мы немного усовершенствуем пример. После выбора значения в поле с автозаполнением мы откроем форму поиска и в неё вставим выбранное значение. Таким образом, если пользователю будет нужно добавить другие условия, он сможет это сделать.

Посмотреть как это работает можно на демонстрационной страничке

Demo

Также выкладываю архив с исходниками.

Source

Теперь посмотрим как это сделать.

Примечание. Чтобы не повторять весь код, я буду считать, что вы читали предыдущие части: «jqGrid – поиск данных» и «Управление jqGrid с помощью поля с автозавершением».

Задача решается в 2 шага.

Шаг 1. Открываем форму поиска.

Делается это одной с помощью всего одной строчки кода

jQuery('#list').jqGrid('searchGrid', {multipleSearch:true});

Шаг 2. Заполняем поля формы.

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

Ищем нужные элементы формы (в данном случае это select со списком полей таблицы и текстовое поле со значением) и с помощью метода val устанавливаем нужные значения.

Окончательно функция updateTable выглядит так.

function updateTable(value) {
	//открываем окно поиска
	jQuery('#list').jqGrid('searchGrid', {multipleSearch:true
	   , afterShowSearch: function() {
			var searchDialog = $('#fbox_list');
			searchDialog.find('select[name=field]').val('city');
			searchDialog.find('input').val(value);
		}
		});
}

Код серверной части я приводить не буду. Он практически не изменился по сравнению с примером из статьи «jqGrid – поиск данных». К тому же, он есть в архиве.

Как всегда, буду рад услышать ваши замечания и дополнения 😉

Интересно почитать.

Хороший ресурс, есть — интересные книги что читать.

Хотите сделать карьеру? Тогда планирование беременности — то, что вам нужно.

Постовой

Оказываем услуги по ведению кадрового учета, специалисты с 5-летним стажем работы