Управление jqGrid с помощью поля с автозавершением

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

jqGrid_autocomplete

Сегодня я продолжу рассказывать о плагине jqGrid и покажу еще один пример его использования.

Если не ошибаюсь, это уже 5-ый пост об этом плагине, поэтому я не буду останавливаться на его установке и настройке. Лучше приведу ссылки на предыдущие части:

1) Query Grid Plugin – «продвинутое» решение для создания таблиц

2) jqGrid: редактирование табличных данных с помощью inline редакторов

3) jqGrid – создание дополнительных кнопок

4) jqGrid – поиск данных

Но для тех, кто их не читал, кратко поясню, о чем вообще речь.

jqGrid – это плагин для библиотеки jQuery, предназначенный для работы с табличными данными. Он поддерживает кучу полезных возможностей вроде разбивки данных на страницы, поиска, добавления, удаления, редактирования записей и т.п.

Естественно, у плагина очень много настроек и вариантов использования, но это не означает, что их хватит на все случаи жизни 😉

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

Как это работает, вы можете посмотреть на демо-страничке

Demo

либо скачать архив с примером и установить его на своем сервере

Source

Реализовать такую систему не сложно.

Потребуются:

1) Библиотека jQuery.

2) Плагин jqGrid.

3) Плагин для создания поля с автозаполением. Я выбрал Ajax AutoComplete for jQuery.

Теперь рассмотрим сам пример.

1) Клиентская часть. Тут нам нужно создать только страничку с таблицей и формой, которая содержит поле с автозаполнением (index.html).

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  
  4. <head>
  5.   <title>jqGrid + Autocomplete</title>
  6.  
  7.   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.   <meta http-equiv="Content-Style-Type" content="text/css" />
  9.  
  10.   <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
  11.   <link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.7.2.custom.css" />
  12.   <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
  13.   <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
  14. </head>
  15. <body>
  16. <div id="container">
  17.   <h1>jqGrid + Autocomplete</h1>
  18.   
  19.   <table id="list"></table>
  20.   <div id="pager"></div>
  21.   
  22.   <form action="#" method="post" id="autocomplete_form">
  23.     <p>
  24.     <label for="city_field">Название города</label>
  25.     <input type="text" id="city_field" name="city_field" size="20" />
  26.     </p>
  27.   </form>
  28.   ...
  29. </div>
  30. </body>
  31. </html>

* This source code was highlighted with Source Code Highlighter.

* This source code was highlighted with Source Code Highlighter.

2) Подключение и настройка плагинов. Этот код добавляем в конец файла index.html перед закрывающим тегом body.

  1. <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
  3. <script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
  4. <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
  5. <script src="js/jquery.autocomplete-min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(function() {
  8.   //настройка плагина jqGrid
  9.   jQuery("#list").jqGrid({
  10.    url:'getdata.php',
  11.    datatype: 'json',
  12.    mtype: 'POST',
  13.    colNames:['Город','Страна'],
  14.    colModel :[
  15.     {name:'city', index:'city', width:350},
  16.     {name:'country', index:'country', width:350}
  17.    ],
  18.    pager: '#pager',
  19.    rowNum:10,
  20.    rowList:[10,20,30],
  21.    sortname: 'country',
  22.    sortorder: 'desc',
  23.    viewrecords: true,
  24.    caption: 'Города Украины и России'
  25.   }).navGrid('#pager', {edit:false,add:false,del:false,refresh:true,search:false});
  26.   
  27.   //эта функция добавляет GET параметр в запрос на получение
  28.   //данных для таблицы и обновляет её
  29.   function updateTable(value) {
  30.     jQuery("#list")
  31.       .setGridParam({url:"getdata.php?sel_city="+value, page:1})
  32.       .trigger("reloadGrid");
  33.   }
  34.   
  35.   //настройка плагина Autocomplete
  36.   //при возникновении события onSelect вызываем функцию updateTable
  37.   $('#city_field').autocomplete({
  38.     serviceUrl:'search.php',
  39.     maxHeight:150,
  40.     onSelect: function(value) {
  41.       updateTable(value);
  42.     }
  43.   });
  44.   
  45.   //этот обработчик используется если посетитель ввел название города
  46.   //и нажал Enter
  47.   $('#autocomplete_form').submit(function() {
  48.     updateTable($('#city_field').val());
  49.     return false;
  50.   });
  51. });
  52. </script>

* This source code was highlighted with Source Code Highlighter.

Для демонстрационных целей я использовал урезанную базу данных городов России и Украины, поэтому таблица содержит 2 поля: название города и название страны. На настройках отображения полей и таблицы я останавливаться не буду, т.к. уже об этом рассказывал.

Тут гораздо интереснее другой момент – источники данных.

И для поля, и для таблицы данные приходят в JSON формате, но для таблицы их формирует скрипт getdata.php, а для поля — search.php. Почему используются разные скрипты? Дело в том, что для плагина автозаполнения нужно меньше данных (только название города), чем для таблицы, и их структура отличается, а вводить какие-нибудь специальные параметры в запрос мне показалось не самым лучшим решением.

3) Связываем плагины между собой. Тут нам нужно чтобы при выборе посетителем города из списка произошло обновление данных в таблице.

Для этого мы в обработчик события onSelect (строки 40-42) добавили вызов функции updateTable и передали ей название города.

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

Для этого с помощью метода setGridParam изменяем параметр url на
getdata.php?sel_city="+value
т.е. мы добавили GET параметр sel_city.
Затем вызываем метод trigger("reloadGrid"), который запускает обновление таблицы.

Еще я добавил вызов функции updateTable в обработчик отправки формы (строки 47-50). На случай если пользователь введет название города и нажмет Enter.

4) Создаем серверные скрипты.

Для автозаполнения (search.php)

  1. <?php
  2. require_once('dbdata.php');
  3.  
  4. try {
  5.   //читаем параметры
  6.   $s_query = $_GET['query'];
  7.   
  8.   //подключаемся к базе
  9.   $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
  10.   //указываем, что нужно использовать utf8
  11.   $dbh->exec('SET CHARACTER SET utf8');
  12.  
  13.   $stmt = $dbh->prepare('SELECT city FROM cities WHERE city LIKE :query');
  14.   $search = $s_query.'%';
  15.   $stmt->bindParam(':query', $search);
  16.   $stmt->execute();
  17.   
  18.   $i=0;
  19.   $response->query = $s_query;
  20.   $response->suggestions = array();
  21.   while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  22.     $response->suggestions[]=$row['city'];
  23.   }
  24.   echo json_encode($response);
  25. }
  26. catch (PDOException $e) {
  27.   echo 'Database error: '.$e->getMessage();
  28. }
  29.  
  30. // end of search.php

* This source code was highlighted with Source Code Highlighter.

Тут, набранные пользователем буквы мы получаем в параметре $_GET['query'].

После этого выполняется один запрос к базе данных (строки 13-16), который находит список всех городов, начинающихся с этих букв.

Затем мы формируем массив с ответом (строки 19-23) и отправляем его браузеру.

Примечание. Структура массива описана в документации к плагину, вам нужно только ее соблюдать.

Скрипт для заплнения таблицы (getdata.php).

  1. <?php
  2. require_once('dbdata.php');
  3.  
  4. try {
  5.   //читаем параметры
  6.   $curPage = $_POST['page'];
  7.   $rowsPerPage = $_POST['rows'];
  8.   $sortingField = $_POST['sidx'];
  9.   $sortingOrder = $_POST['sord'];
  10.   
  11.   $selCity = null;
  12.   if (isset($_GET['sel_city'])) {
  13.     $selCity = $_GET['sel_city'];
  14.   }
  15.   
  16.   //подключаемся к базе
  17.   $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
  18.   //указываем, что нужно использовать utf8
  19.   $dbh->exec('SET CHARACTER SET utf8');
  20.  
  21.   //определяем количество записей в таблице
  22.   if (null === $selCity) {
  23.     $rows = $dbh->query('SELECT COUNT(id) AS count FROM cities');
  24.   } else {
  25.     $rows = $dbh->query('SELECT COUNT(id) AS count FROM cities WHERE city='.$dbh->quote($selCity));
  26.   }
  27.   $totalRows = $rows->fetch(PDO::FETCH_ASSOC);
  28.  
  29.   $firstRowIndex = $curPage * $rowsPerPage - $rowsPerPage;
  30.   //получаем список городов из базы
  31.   if (null === $selCity) {
  32.     $res = $dbh->query('SELECT * FROM cities ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);
  33.   } else {
  34.     $res = $dbh->query('SELECT * FROM cities WHERE city='.$dbh->quote($selCity).' ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);
  35.   }
  36.   
  37.   //сохраняем номер текущей страницы, общее количество страниц и общее количество записей
  38.   $response->page = $curPage;
  39.   $response->total = ceil($totalRows['count'] / $rowsPerPage);
  40.   $response->records = $totalRows['count'];
  41.  
  42.   $i=0;
  43.   while($row = $res->fetch(PDO::FETCH_ASSOC)) {
  44.     $response->rows[$i]['id']=$row['id'];
  45.     $response->rows[$i]['cell']=array($row['city'], $row['country']);
  46.     $i++;
  47.   }
  48.   echo json_encode($response);
  49. }
  50. catch (PDOException $e) {
  51.   echo 'Database error: '.$e->getMessage();
  52. }
  53.  
  54. // end of getdata.php

* This source code was highlighted with Source Code Highlighter.

Тут код выглядит немного сложнее, но это только из-за использования пагинации (разбивки на страницы). На самом деле большую его часть я просто скопировал из документации к jqGrid (к тому же, он уже обсуждался).

Обратить внимание нужно на обработку параметра sel_city (строки 12, 22 и 31).

Если этот параметр получен, то в запрос на поиск данных мы добавляем условие WHERE city=…, если нет – берем из базы все города подряд.

Я надеюсь, что у вас не возникнет проблем с этим примером. Идея ведь достаточно простая: добавить параметр с нужными данными к запросу и обработать его в серверном скрипте.

Инструкции по установке и настройке примера есть в архиве.

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

UPD 21.06.2010 В этом примере обнаружилась недоработка. Оказалось, что IE не хочет передавать название города в UTF-8 (название вставляется в URL, т.е. на сервер приходит в GET параметре). Для решения необходимо перед отправкой закодировать название города с помощью encodeURIComponent (в браузере) и раскодировать с помощью rawurldecode (на сервере).

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

Несколько способов о том как заработать студенту в наше время.

Руководителям: оказание услуг бухучета позволяет сэкономить на штатном бухгалтере

  • Таким же образом реализован поиск товаров в интернет-магазине Viart Shop Russian Edition DEMO

  • Таким же образом реализован поиск товаров в интернет-магазине Viart Shop Russian Edition DEMO

  • andrey

    Можете подсказать какое совйство в jqGrid отвечает за размер таблицы. Мне нужно чтобы она занимала всю область выделяемую ей.

    • Ширина столбцов прописана в js коде. Первый листинг строки 27-30, там есть параметр width – это ширина в пикселах (задается для каждого столбца отдельно). Но это для таблиц с фиксированной шириной.

      Для плавающей я нашел 2 решения: раз, два.
      Но оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.

  • andrey

    Можете подсказать какое совйство в jqGrid отвечает за размер таблицы. Мне нужно чтобы она занимала всю область выделяемую ей.

    • Ширина столбцов прописана в js коде. Первый листинг строки 27-30, там есть параметр width – это ширина в пикселах (задается для каждого столбца отдельно). Но это для таблиц с фиксированной шириной.

      Для плавающей я нашел 2 решения: раз, два.
      Но оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.

  • andrey

    Подскажи пожалуйста еще вот что, нужно php скриптом менять заголовки таблицы (colNames), как это можно сделать? Нигде не найду (

    • Попробуйте использовать метод setLabel. В первом параметре указываете номер столбца (начиная с нуля), во втором — новый заголовок. Третий и четвертый параметр — для установки класса и свойств.

  • andrey

    Подскажи пожалуйста еще вот что, нужно php скриптом менять заголовки таблицы (colNames), как это можно сделать? Нигде не найду (

    • Попробуйте использовать метод setLabel. В первом параметре указываете номер столбца (начиная с нуля), во втором — новый заголовок. Третий и четвертый параметр — для установки класса и свойств.

  • andrey

    Спасибо большое!

  • andrey

    Спасибо большое!

  • Максим

    Владимир может вы сталкивались с этим, у меня не получаеться автозаполнение. Таблица работает хороша при нажатии enter показывает записи таблицы. Но когда я набираю в inpute, поля не выходят, а выходит ошибка:
    (Сообщение: 'data' — есть null или не является объектом
    Строка: 10
    Символ: 5583
    Код: 0
    URI-код: http://orahost.aup.komienergo.ru/mahlinec/jqgrid_autocomplete1/js/jquery.autocomplete-min.js)

    • Максим

      А уже не надо, так бывает тока напишишь вопрос и сам находишь.
      Извените за беспокойства)))))

  • Максим

    Владимир может вы сталкивались с этим, у меня не получаеться автозаполнение. Таблица работает хороша при нажатии enter показывает записи таблицы. Но когда я набираю в inpute, поля не выходят, а выходит ошибка:
    (Сообщение: 'data' — есть null или не является объектом
    Строка: 10
    Символ: 5583
    Код: 0
    URI-код: http://orahost.aup.komienergo.ru/mahlinec/jqgrid_autocomplete1/js/jquery.autocomplete-min.js)

    • Максим

      А уже не надо, так бывает тока напишишь вопрос и сам находишь.
      Извените за беспокойства)))))

  • Евгений

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

    jQuery("#list").jqGrid( {
    url : 'createUrl('/admin/get_users/'); ?>',
    datatype : 'json',
    mtype : 'POST',
    colNames : [ ......... ],
    colModel : [............],
    pager : '#pager',
    rowNum : 50,
    rowList : [ 50, 100, 150 ],
    sortname : 'invid',
    sortorder : 'desc',
    viewrecords : true,
    caption : 'Пользователи',
    ondblClickRow
    : function(id) {
    if (id && id != lastSel) {
    jQuery(«#list»).restoreRow(lastSel);
    jQuery(«#list»).editRow(id, true);
    lastSel = id;
    }
    },
    }).navGrid('#pager',{edit:true,add:true,del:true,refresh:true});

    Остальное (редактирование, добавление) работает на ура!

    • Посмотрите, пожалуйста, работает ли этот пример.
      В вашем коде я ошибки не вижу. Правда я обычно добавляю настройки для поиска.
      .navGrid('#pager',{view:false, del:false, add:false, edit:false},
      {}, // default settings for edit
      {}, // default settings for add
      {}, // delete instead that del:false we need this
      {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
      {} /* view parameters*/
      );

  • Евгений

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

    jQuery("#list").jqGrid( {
    url : 'createUrl('/admin/get_users/'); ?>',
    datatype : 'json',
    mtype : 'POST',
    colNames : [ ......... ],
    colModel : [............],
    pager : '#pager',
    rowNum : 50,
    rowList : [ 50, 100, 150 ],
    sortname : 'invid',
    sortorder : 'desc',
    viewrecords : true,
    caption : 'Пользователи',
    ondblClickRow
    : function(id) {
    if (id && id != lastSel) {
    jQuery(«#list»).restoreRow(lastSel);
    jQuery(«#list»).editRow(id, true);
    lastSel = id;
    }
    },
    }).navGrid('#pager',{edit:true,add:true,del:true,refresh:true});

    Остальное (редактирование, добавление) работает на ура!

    • Посмотрите, пожалуйста, работает ли этот пример.
      В вашем коде я ошибки не вижу. Правда я обычно добавляю настройки для поиска.

      .navGrid('#pager',{view:false, del:false, add:false, edit:false},
             {}, // default settings for edit
             {}, // default settings for add
             {}, // delete instead that del:false we need this
             {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
             {} /* view parameters*/
      );
  • Дмитрий

    Подскажите пожалуйста.
    Проблема вот в чем. Мне нужно отрисовывть эту табличку посередине окна. Пробовал заключать в но тогда данные в таблице тоже выравниваются по центру и смещаются от столбцов. Пытался в CSS поменять тот же эффект.

    • Дмитрий

      В тег

      • Создайте div, внутри которого будет находится таблица, и установите для него правило
        margin: 0 auto 0 auto;

  • Дмитрий

    Подскажите пожалуйста.
    Проблема вот в чем. Мне нужно отрисовывть эту табличку посередине окна. Пробовал заключать в но тогда данные в таблице тоже выравниваются по центру и смещаются от столбцов. Пытался в CSS поменять тот же эффект.

    • Дмитрий

      В тег

      • Создайте div, внутри которого будет находится таблица, и установите для него правило
        margin: 0 auto 0 auto;

  • Макс

    Доброго времени суток!
    К сожалению, не могу понять, в чем проблема. Запускаю ваш пример на «Демо-странице» , автозаполнение есть, а вот при нажатии на «Enter» таблица полностью очищается и никаких данных не выводит (хотя они в таблице есть!).
    На моей машине тоже скаченый пример не работает…

  • Это особенность работы плагина. Например, вы набрали первые буквы города, под полем появился список из нескольких городов. Если в этот момент вы нажмете Enter, то серверу будет отправлен текст, который находится в поле, т.е. первые буквы названия.

    Вам нужно сначала с помощью стрелки вниз (или мыши) выбрать название города и после этого нажать Enter.

  • Макс

    Не работает в IE, и все отлично в mozilla firefox.
    да, набираю полностью, и только потом Enter.

  • Действительно, спасибо, что написали. Я постараюсь разобраться. Есть подозрение, что проблема в одном из плагинов.

  • Andrey

    Владимр, не подскажите как можно убрать заголовок таблицы и pager во время лоадинга, просто когда грузится много данных таблица показывает скрытые поля и pager. А не хотелось бы чтобы во время лоадинга видели скрытые поля. Заранее спасибо

  • Тут я вряд ли смогу помочь. Сам с такой проблемой не сталкивался.

  • Andrey

    Спасибо )

  • Winkiller

    Владимир, здравствуйте, Вы не разобрались с проблемой работы в IE? Уже все перепробовал, никак не могу заставить нормально работать в IE.

  • К сожалению, нет. Навалилось много срочных дел 🙂 Обещание я помню, постараюсь в ближайшее время сделать.

  • Проблема в IE — моя недоработка. Дело в том, что этот браузер не хочет работать с нормальными кодировками (utf-8) в get запросе.

    Т.е. нужно закодировать название города с помощью JS и раскодировать его на сервере.

    В JS для этого используется функция encodeURIComponent(), в PHP обратную операцию выполняет rawurldecode.

    Демо страничку я исправил и скрипт в архиве обновил. Если будут проблемы, пишите.

  • Анна

    Здравствуйте!
    А как можно сделать горизонтальную прокрутку для таблицы с большим количеством столбцов??

  • А разве она автоматически не появляется когда столбцы выходят за пределы таблицы?

  • Анна

    нет, при задании жестко ширины сужаются все столбцы до нечитаемых. А если автоширина,то по сумме всех столбцов. Прокрутки ну никак нет!

  • Нужны такие настройки
    1) указать ширину столбцов в colModel
    colModel :[
    {name:'city', index:'city', width:350},
    {name:'country', index:'country', width:350}
    ],
    2) указать общую ширину страницы
    width: 400,

    3) запретить сжатие столбцов
    shrinkToFit:false,

  • Анна

    спасибо!

  • Andrey

    можно как-то передавать данные в запрос не через url?

  • Любовь

    Добрый день!
    Возник такой вопрос:
    Использую JSP и серверную часть написана сервлетом.
    На JSP поместила JQGrid. Работает все отлично, НО на команду setGridParam не реагирует вообще никак (URL отсылает старый, более того, любой другой параметр тоже игнорирует), хотя .trigger(«reloadGrid») видит и таблицу перегружает. Знает ли кто-нибудь как исправить эту ошибку?function updateTable(value) {jQuery(«#list»).jqGrid().setGridParam({url:'JQGridServlet?adm=88&action=fetchData'}).trigger(«reloadGrid»);$('#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;}); updateTable(value) {jQuery(«#list»).jqGrid().setGridParam({url:'JQGridServlet?adm=88&action=fetchData'}).trigger(«reloadGrid»);$('#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;});»#list»).jqGrid().setGridParam({url:'JQGridServlet?adm=88&action=fetchData'}).trigger(«reloadGrid»);
    $('#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;});'#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;});'#city_field').val());return false;});return false;});
    setGridParam не реагирует вообще никак (URL отсылает старый, более того, любой другой параметр тоже игнорирует), хотя .trigger(«reloadGrid») видит и таблицу перегружает. Знает ли кто-нибудь как исправить эту ошибку?

    function updateTable(value) {jQuery(«#list»).jqGrid().setGridParam({url:'JQGridServlet?adm=88&action=fetchData'}).trigger(«reloadGrid»);$('#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;}); updateTable(value) {jQuery(«#list»).jqGrid().setGridParam({url:'JQGridServlet?adm=88&action=fetchData'}).trigger(«reloadGrid»);$('#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;});»#list»).jqGrid().setGridParam({url:'JQGridServlet?adm=88&action=fetchData'}).trigger(«reloadGrid»);
    $('#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;});'#autocomplete_form').submit(function() {updateTable($('#city_field').val());return false;});'#city_field').val());return false;});return false;});

    • Посмотрите отладчиком (firebug или любым другим) отсылается ли вообще параметр. Если да, проблема на серверной стороне.

      • Любовь

        Для отладки созданы были 2 xml. Стартовый NewFile1, для перехода NewFile2.
        $('#autocomplete_form').submit(function() {jQuery(«#list»).jqGrid(«setGridParam»,{url:'NewFile2.xml'}).jqGrid('hideCol',»col5");alert( jQuery(«#list»).jqGrid('getGridParam', 'url'));jQuery(«#list»).trigger(«reloadGrid»);return false;});алерт выдает NewFile2, но перегружается все равно в NewFile1.'#autocomplete_form').submit(function() {jQuery(«#list»).jqGrid(«setGridParam»,{url:'NewFile2.xml'}).jqGrid('hideCol',»col5");alert( jQuery(«#list»).jqGrid('getGridParam', 'url'));jQuery(«#list»).trigger(«reloadGrid»);return false;});алерт выдает NewFile2, но перегружается все равно в NewFile1.»#list»).jqGrid(«setGridParam»,{url:'NewFile2.xml'}).jqGrid('hideCol',»col5");alert( jQuery(«#list»).jqGrid('getGridParam', 'url'));jQuery(«#list»).trigger(«reloadGrid»);return false;});алерт выдает NewFile2, но перегружается все равно в NewFile1.»#list»).jqGrid('getGridParam', 'url'));jQuery(«#list»).trigger(«reloadGrid»);return false;});алерт выдает NewFile2, но перегружается все равно в NewFile1.»#list»).trigger(«reloadGrid»);return false;});алерт выдает NewFile2, но перегружается все равно в NewFile1.

        • В этой статье во втором листинге (строки 30-33) приведен код замены url. Вы не пробовали его запускать? Работает?

        • Любовь

          Ваш пример отлично работает под wamp сервером, мне необходимо запускать под WebSphere Appl.Server. Причем дошло до того, что один и тот же код прекрасно работает под wamp и не работает под WAS. Даже не знаю, что думать, то ли .JSP работает с qgrid`ом иначе чем .html, или проблема в сервере…

        • Сам по себе jqGrid выполняется в браузере и от сервера не зависит… при условии, что сервер правильно отдает скрипты и данные.
          Проверить можно так. Ставите firebug и перегружаете страницу. Затем проверяете все JS скрипты (вы должны увидеть код скрипта, бывают проблемы из-за включенного сжатия на сервере и неправильных заголовков). После загрузки jqGrid отправит запрос на получение данных. Ответ должен прийти в JSON (или XML) формате.

        • Любовь

          Владимир, спасибо! Вроде разобралась, работает! 🙂

  • Любовь

    Добрый день!
    Возник такой вопрос:
    Использую JSP и серверную часть написана сервлетом.
    На JSP поместила JQGrid. Работает все отлично, НО на команду setGridParam не реагирует вообще никак (URL отсылает старый, более того, любой другой параметр тоже игнорирует), хотя .trigger(«reloadGrid») видит и таблицу перегружает. Знает ли кто-нибудь как исправить эту ошибку?

  • Redphone

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

    • Сбросить параметры поиска (строки 29-33) и обновить данные в таблице.

      • opus44

        Можно на этом моменте подробнее? Как будет выглядеть код? Я тоже не могу
        вернуть набор данных в исходное состояние без перезагрузки страницы.
        спасибо.

        • Смотрите, перезагрузка таблицы выполняется с помощью

          $('#list').trigger( 'reloadGrid' );

          В моем примере есть функция, которая устанавливает фильтр
          function updateTable(value) {
          jQuery(«#list»)
          .setGridParam({url:»getdata.php?sel_city=»+value, page:1})
          .trigger(«reloadGrid»);
          }

          Она добавляет GET параметр со значением sel_city к запросу на получение данных, и после этого вызывает перезагрузку таблицы.
          Тут важно понимать, что jqGrid фактически ничего не знает о том, что мы каким-то образом фильтруем данные.
          Мы просто указали ему новое значение url для AJAX запроса, с помощью которого он получает данные.

          Т.е. в моем примере для того, чтобы сбросить фильтр нужно выполнить:

          jQuery(«#list»).setGridParam({url:»getdata.php», page:1}).trigger(«reloadGrid»);

  • Andrey

    Пробую сделать по аналогии таблицу, в которой фильтрация идет по нескольким полям и в результатах могут выводиться все строки попадающие под условие.
    Сначала все получалосьПодключил свою базу, добавил столбцов, все такое.
    В search.php заменил 14-ю строку на $search = '%'.$s_query.'%'; чтобы показывало не только при совпадении с начала строки
    В getdata.php в запросе тоже заменил = на like чтобы выводило все строки совпадающими с запросом.
    Все заработало, фильтрует как и хотел.

    Но когда в одном поле мне понадобился селект, то с ним получился затык. Так понимаю нужен еще один обработчик, срабатывающий по onChange и тоже вызывающий дополненный updateTable. В яваскриптах я разбираюсь слабо, не подскажете как правильно написать обработчик $('#type')  ?

    • Попробуйте использовать это решение.

      • Andrey

        Может я неправильно понял, но мне кажется там идет речь про другое, когда комбобокс «рисуется» гридом.

        А мне нужно (если применительно к вашему демо) заменить поле «Название города» на комбобокс. Чтобы в нем было только несколько вариантов выбора. Условно: Москва, Киев, Перьмь.

        Возможно путано объясняю. ((

        • Ясно, поле «Название города» — самое обычное. Просто вставьте вместо него

              Москва
              Киев

              Перьмь

          И добавьте обработчик

            $('#cities').change(function() {
              updateTable($(this).val());
              return false;
            });

        • Andrey

          Не заметил, что уже ответили, сделал  сам почти то же самое. Спасибо!

          Жаль показать не могу, что получилось — сайт сделан для использования только внутри сети.

      • Andrey

        Сделал обработчик аналогичный тому который срабатывает по Enter

        Только начинается с 
        $('#autocomplete_form').change(function() {

        Кажись работает, но еще поковыряю. Наверное в идеале стоило бы объединить эти два обработчика в один.

  • Александр General

    Подскажите пожалуйста, устал уже ковырять.
    Как сделать так чтобы таблица после отправки данных на сервер обновилась (загрузила свежие данные с сервера)?
    Не пойму к чему привязать событие .trigger(«reloadGrid»).
    К событиям afterSaveCell и т.п. не привязывается.

    • Уточните, пожалуйста, каким способом вы выполняете отправку данных на сервер? Это можно сделать несколькими способами и обновление таблицы будет зависеть от того какой вы выбрали.

      В общем случае вам нужно вызвать $('#myGrid').trigger(«reloadGrid») после получения ответа сервера, т.е. в обработчике ответа ajax запроса.

      • Александр General

        Это понятно что нужно вызвать reloadGrid, но в каком обработчике или после какого события. Мне нужно чтобы после того как нажмешь на кнопку сохранить в инлайнРедакторе данные отправились на сервер в БД, а табличка перезагрузилась с новыми данными.
        Можете подсказать какое событие (из встроенных в jqgrid) наступает после отправки данных?
        события типа afterSaveRow не работают

        • Выложите где-нибудь (например, в сниппетах на github) ваш код. Мне нужно видеть как сконфигурирован jqGrid.

        • Александр General

          http://2410.ru/test_jqgrid.php
          В скрипте есть таблица «Заказы» а в ней подтаблица (subgrid) «работа».
          После добавления работ, например если добавить несколько (зажав шифт), все эти работы отображаются в одной строке (через запятую) и только после обновления таблицы они отображаются как надо (в каждой строке работа).
          Если использовать reloadGrid то таблица перерисовывается и подтаблица работы закрывается.
          Хотелось бы сделать как:
          После добавления одной или нескольких работ, таблица работы обновлялась, оставаясь развернутой.
          Можно это сделать и как?
          Желательно встроенными методами jqgrid

        • Попробуйте так:

          jQuery("#tab_klient").jqGrid({
          datatype: "xml",
          url:'php/k1/ajax_tab_klient.php',
          mtype: 'POST',
          ...
          aftersavefunc: function(rowId, response) {
          jQuery('#tab_klient').trigger('reloadGrid');
          }
          ...
          });

          Вообще проблема довольно интересная. Вы используете список с множественным выбором для того, чтобы сразу создать несколько записей. Это правильно, т.к. уменьшается количество действий пользователя. Но использование inline редактора решение спорное. Этот вариант подразумевает, что будет добавлена одна строка, и jqGrid выводит одну строку со значениями списка через запятую. Вы создаёте несколько записей в базе и поэтому вам нужна перезагрузка чтобы показать их пользователю. Может быть лучше использовать добавление через форму?

        • Александр General

          Может и лучше… Вопрос времени и пользования. Форма (с текущей точки зрения) это лишний геморой для пользователя, который добавляет много.
          Посмотрим что получится в результате использования.

        • Прошу прощения, в предыдущем комментарии я ошибся с размещением параметров.

          Я сделал небольшой пример и разместил его на github — https://github.com/vladimir-s/jqgrid-inline-edit-test. В этом примере вложенные таблицы не используются, но принципиальной разницы нет. Обработчик нужно указать при создании inlineNav.

        • Александр General

          УРА ЗАРАБОТАЛО!!!
          т.к субгрид формируется динамически т.е. имя таблицы всегда разное ( $(«#»+subgrid_table_id) ), я поставил объявление функции после формирования подтаблицы.
          Спасибо за помощь

        • Александр General

          Владимир, подскажите как сделать так чтобы pager был не внизу, а вверху, над названиями колонок?

        • Размещение указывается в настройках — параметр toppager

        • Александр General

          Поставил toppager:true, но наверх добавилась только нижняя панель с группировкой вывода, кнопки (edit, del, save) так и остались внизу. А мне надо наверх их. Потому что, когда редактируешь новая запись появляется в первой строке таблицы, а кнопка сохранить внизу. Не очень удобно.
          Как перенести все кнопки редактирования наверх?

        • Александр General

          разобрался. там надо еще в навигаторе поставить {edit:false,add:false,del:true,'cloneToTop':true}
          и сменить id inlineNav на
          jQuery(«#tab»).jqGrid('inlineNav',»#tab_toppager» (добавить _toppager)

        • Александр General

          aftersavefunc: — нет такой опции, код не работает, ничего не происходит.

  • Александр

    Добрый день. Можете привести пример интеграции jquery.autocomplete с addRow в jqGrid?

    • Есть готовый пример. Выберите запись, нажмите на кнопку «редактировать» (внизу слева) и попробуйте что-то написать в поле ShipName.

      • Александр

        У меня почему то результаты autocomplete появляются за модальным окном добавления записи.

        • Вам нужно сделать следующее:

          1) с помощью инструментов разработчика (в chrome) или firebug (в firefox) найдите тег, который содержит результаты autocomplete

          2) добавьте для этого тега CSS правило: z-index: 100
          Вместо 100 можно указать любое значение, вы можете экспериментировать прямо в firebug. Главное подобрать значение при котором список окажется перед модальным окном.

          3) перенесите правило (z-index) с CSS файл вашей страницы.