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

22 ноября, 2009
jqgrid search_autocomplete

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

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

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

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

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

демонстрационный пример

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

архив с исходным кодом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Постовой

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

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в Ajax, JavaScript, Web разработка View Comments

]]>
  • lex
    nvm, нашел :)
  • lex
    А есть ли способ создать кнопку "Search" и расположить ее за пределами грида?

    Так работает, но это некрасиво...
    jQuery("#search_s4list").click();
  • andrey
    И еще один вопросик. Опять не нашел в справке событие на редактирование яейки по двойному клику. По одинраному все прекрасно работает.
  • Тут я, похоже, смогу помочь :)
    Есть событие ondblClickRow и оно правильно работает. Пример и описание.
  • andrey
    Владимир. Это опять я. Не подскажешь как можно убрать выделение чекбоксов при клике на строку, когда свойство multiple=true; Нет ли какого-то свойства? Или это надо в коде убирать плагина?
  • Я не пойму каким образом multiple=true относится к чекбоксам? Это свойство для select'ов и задаётся оно для столбца в котором этот select находится (в colModel). По-идее оно вообще не должно влиять на чекбокс в другом столбце. Или я что-то не так понял?
  • Подскажите, почему такая проблема может быть:
    Когда в таблице на странице строк больше 30 (по 30 на страницу), то высота всех строк нормальная.
    Как только количество строк меньше 30, то у всех высота увеличивается так, чтобы все строки занимали всю высоту страницы?
    Т.е. когда 1 строка, то она вообще на весь лист по высоте.

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

    В любом случае, вы можете проверить стили с помощью firebug'а. Смотреть нужно стили строки, ячейки и текста, который находится внутри.
  • Rinat
    Вопрос по форме редактирование в jqGrid, есть ли возможность отслеживать переключение радиокнопок, чекбоксов, селектов? Какие-нибудь onChanges, по которым можно было бы проверить выбранное значение поля и при необходимости выдать сообщение, форму и т.д.
  • Встроенные события есть, список находится здесь. Кроме того, посмотрите события связанные с редактированием ячеек.
  • andrey
    Опять отвечаю сам )) Надо использовать appendPostData
  • Так это очень хорошо, что сами ответ нашли.
    Во-первых, теперь вы лучше ориентируетесь в документации и увереннее работаете с jqGrid, во-вторых, мне смотреть доки не пришлось ;)
  • andrey
    Появился еще вопрос по поиску в jqgrid. Можно ли форму поиска конструировать самому и в дальнейшем передавать парметры поиска в jqgrid. Меня не устраивает та форма которая отображается на фоне jqgrid. Можно ли как-нибудь такое сделать? Есть ли какие нибудь решения?
  • andrey
    Спасибо, большое. Я решил проблему. Только хотел отписаться ))) Ты был прав. Очень мне понравился компонент jqgrid c автодополнением. Спасибо за хорошее освещение его возможностей.
  • 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.
  • setCell, на мой взгляд, наиболее подходящий метод для этой задачи. В параметрах можно передать имя CSS класса, очень удобный метод. Почему вы ищите другой способ?

    setSelection предназначен именно для выделения строк. На оф. сайте, кстати, есть пример (Advanced - Multi Select), но там установлено multiselect: true. Не уверен, что выделение будет работать если переключить его в false (сам не пробовал).
  • andrey
    И еще вопрос, можно ли выделять несколько строк с помощью setSelection, но чтобы свойство myltiselect было false. Я просто уже начал думать как бы мне выделить строки с помощью setSelection. Может с помощью него как то можно?
  • andrey
    А можно ли для всей строки с заданным значением установить bacground? Можно только с помощью setCell?
blog comments powered by Disqus ]]>