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

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

jqgrid search_autocomplete

Сегодня будет еще один небольшой пример работы с 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-летним стажем работы

  • andrey

    А можно ли для всей строки с заданным значением установить bacground? Можно только с помощью setCell?

  • andrey

    А можно ли для всей строки с заданным значением установить bacground? Можно только с помощью setCell?

  • andrey

    И еще вопрос, можно ли выделять несколько строк с помощью setSelection, но чтобы свойство myltiselect было false. Я просто уже начал думать как бы мне выделить строки с помощью setSelection. Может с помощью него как то можно?

  • andrey

    И еще вопрос, можно ли выделять несколько строк с помощью setSelection, но чтобы свойство myltiselect было false. Я просто уже начал думать как бы мне выделить строки с помощью setSelection. Может с помощью него как то можно?

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

    setSelection предназначен именно для выделения строк. На оф. сайте, кстати, есть пример (Advanced — Multi Select), но там установлено multiselect: true. Не уверен, что выделение будет работать если переключить его в false (сам не пробовал).

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

    setSelection предназначен именно для выделения строк. На оф. сайте, кстати, есть пример (Advanced — Multi Select), но там установлено multiselect: true. Не уверен, что выделение будет работать если переключить его в false (сам не пробовал).

  • andrey

    Спасибо, буду делать тогда через setCell

    • andrey

      Владимир, есть еще вопрос ) Мучаюсь с автозаполнением. При отправке ajax русских символов на сервер приходит от GET какая- то фигня. Но у вас после строк

      $stmt = $dbh->prepare('SELECT city FROM cities WHERE city LIKE :query');
      $search = $s_query.'%';
      $stmt->bindParam(':query', $search);
      $stmt->execute();

      Все выполняется, а уменя после строки
      в ZF

      $query = «SELECT word FROM keywords WHERE word LIKE '$search' limit 100»;
      $row = $this->db->fetchAll($query);

      Спрашивают у mysql в неправильной кодировке. Можете что-нибудь сказать по этому поводу?

      • Да, могу 🙂 Проблема, скорее всего, с кодировками. В AJAX запросе данные передаются всегда в UTF-8. Если у ваших скриптов или базы кодировка другая, то полученные данные нужно перекодировать, например, с помощью mb_convert_encoding или iconv.

  • andrey

    Спасибо, буду делать тогда через setCell

    • andrey

      Владимир, есть еще вопрос ) Мучаюсь с автозаполнением. При отправке ajax русских символов на сервер приходит от GET какая- то фигня. Но у вас после строк

      $stmt = $dbh->prepare('SELECT city FROM cities WHERE city LIKE :query');
      $search = $s_query.'%';
      $stmt->bindParam(':query', $search);
      $stmt->execute();

      Все выполняется, а уменя после строки
      в ZF

      $query = «SELECT word FROM keywords WHERE word LIKE '$search' limit 100»;
      $row = $this->db->fetchAll($query);

      Спрашивают у mysql в неправильной кодировке. Можете что-нибудь сказать по этому поводу?

      • Да, могу 🙂 Проблема, скорее всего, с кодировками. В AJAX запросе данные передаются всегда в UTF-8. Если у ваших скриптов или базы кодировка другая, то полученные данные нужно перекодировать, например, с помощью mb_convert_encoding или iconv.

  • andrey

    Спасибо, большое. Я решил проблему. Только хотел отписаться ))) Ты был прав. Очень мне понравился компонент jqgrid c автодополнением. Спасибо за хорошее освещение его возможностей.

  • andrey

    Спасибо, большое. Я решил проблему. Только хотел отписаться ))) Ты был прав. Очень мне понравился компонент jqgrid c автодополнением. Спасибо за хорошее освещение его возможностей.

  • andrey

    Появился еще вопрос по поиску в jqgrid. Можно ли форму поиска конструировать самому и в дальнейшем передавать парметры поиска в jqgrid. Меня не устраивает та форма которая отображается на фоне jqgrid. Можно ли как-нибудь такое сделать? Есть ли какие нибудь решения?

  • andrey

    Появился еще вопрос по поиску в jqgrid. Можно ли форму поиска конструировать самому и в дальнейшем передавать парметры поиска в jqgrid. Меня не устраивает та форма которая отображается на фоне jqgrid. Можно ли как-нибудь такое сделать? Есть ли какие нибудь решения?

  • andrey

    Опять отвечаю сам )) Надо использовать appendPostData

    • Так это очень хорошо, что сами ответ нашли.
      Во-первых, теперь вы лучше ориентируетесь в документации и увереннее работаете с jqGrid, во-вторых, мне смотреть доки не пришлось 😉

  • andrey

    Опять отвечаю сам )) Надо использовать appendPostData

    • Так это очень хорошо, что сами ответ нашли.
      Во-первых, теперь вы лучше ориентируетесь в документации и увереннее работаете с jqGrid, во-вторых, мне смотреть доки не пришлось 😉

  • Rinat

    Вопрос по форме редактирование в jqGrid, есть ли возможность отслеживать переключение радиокнопок, чекбоксов, селектов? Какие-нибудь onChanges, по которым можно было бы проверить выбранное значение поля и при необходимости выдать сообщение, форму и т.д.

  • Rinat

    Вопрос по форме редактирование в jqGrid, есть ли возможность отслеживать переключение радиокнопок, чекбоксов, селектов? Какие-нибудь onChanges, по которым можно было бы проверить выбранное значение поля и при необходимости выдать сообщение, форму и т.д.

  • Подскажите, почему такая проблема может быть:
    Когда в таблице на странице строк больше 30 (по 30 на страницу), то высота всех строк нормальная.
    Как только количество строк меньше 30, то у всех высота увеличивается так, чтобы все строки занимали всю высоту страницы?
    Т.е. когда 1 строка, то она вообще на весь лист по высоте.

    У вас в примере все нормально. Копировал css и файлы отсюда.

    • Вы запускаете только мой пример? Или на странице есть ещё какой-то код и стили?
      Я сильно сомневаюсь, что браузер одну и ту же разметку с одними и теми же стилями показывает по-разному.

      В любом случае, вы можете проверить стили с помощью firebug'а. Смотреть нужно стили строки, ячейки и текста, который находится внутри.

  • Подскажите, почему такая проблема может быть:
    Когда в таблице на странице строк больше 30 (по 30 на страницу), то высота всех строк нормальная.
    Как только количество строк меньше 30, то у всех высота увеличивается так, чтобы все строки занимали всю высоту страницы?
    Т.е. когда 1 строка, то она вообще на весь лист по высоте.

    У вас в примере все нормально. Копировал css и файлы отсюда.

    • Вы запускаете только мой пример? Или на странице есть ещё какой-то код и стили?
      Я сильно сомневаюсь, что браузер одну и ту же разметку с одними и теми же стилями показывает по-разному.

      В любом случае, вы можете проверить стили с помощью firebug'а. Смотреть нужно стили строки, ячейки и текста, который находится внутри.

  • andrey

    Владимир. Это опять я. Не подскажешь как можно убрать выделение чекбоксов при клике на строку, когда свойство multiple=true; Нет ли какого-то свойства? Или это надо в коде убирать плагина?

    • Я не пойму каким образом multiple=true относится к чекбоксам? Это свойство для select'ов и задаётся оно для столбца в котором этот select находится (в colModel). По-идее оно вообще не должно влиять на чекбокс в другом столбце. Или я что-то не так понял?

  • andrey

    Владимир. Это опять я. Не подскажешь как можно убрать выделение чекбоксов при клике на строку, когда свойство multiple=true; Нет ли какого-то свойства? Или это надо в коде убирать плагина?

    • Я не пойму каким образом multiple=true относится к чекбоксам? Это свойство для select'ов и задаётся оно для столбца в котором этот select находится (в colModel). По-идее оно вообще не должно влиять на чекбокс в другом столбце. Или я что-то не так понял?

  • andrey

    И еще один вопросик. Опять не нашел в справке событие на редактирование яейки по двойному клику. По одинраному все прекрасно работает.

  • andrey

    И еще один вопросик. Опять не нашел в справке событие на редактирование яейки по двойному клику. По одинраному все прекрасно работает.

  • lex

    А есть ли способ создать кнопку «Search» и расположить ее за пределами грида?

    Так работает, но это некрасиво…
    jQuery(«#search_s4list»).click();

  • lex

    А есть ли способ создать кнопку «Search» и расположить ее за пределами грида?

    Так работает, но это некрасиво…
    jQuery(«#search_s4list»).click();

  • lex

    nvm, нашел 🙂

  • lex

    nvm, нашел 🙂

  • de1phi

    а можно autocomplete встроить в filterToolbar?

    • de1phi

      вопрос снят)

  • Alexey

    кто  вкурсе, как после сохранения данных в ячейки получить и выполнить eval данные от php скрипта, который данные получил от grid?

    • Попробуйте использовать событие loadComplete http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

      • Alexey

        loadComplete срабатывает когда закончилась загрузка данных, я ищу метод который сработает, когда нажали кнопку сохранить и действие выполнилось. из списка events такого метода не нашел =(

        • А почему не хотите просто «повесить» обработчик события click на кнопку «сохранить»?

        • Alexey

          нашел решение:
          function checksave(data)        {            eval(data.responseText);        }jQuery('#list').saveRow(id, checksave);