jqGrid — поиск данных

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

jqgrid

Приветствую всех!

Я довольно давно обещал рассказать о функции поиска в плагине jqGrid и сегодня выполняю обещание.

Для тех, кто сразу хочет посмотреть, как это работает, я сделал демонстрационную страничку

Demo

и, конечно, можно скачать архив с примером

Source

Напомню, что jqGrid — это плагин для библиотеки jQuery, который значительно упрощает работу с таблицами данных.

Сразу хочу отметить, что эта статья — продолжение предыдущих двух частей (jQuery Grid Plugin — «продвинутое» решение для создания таблиц и jqGrid: редактирование табличных данных с помощью inline редакторов). Поэтому если вы впервые слышите о jqGrid — очень советую почитать хотя бы первую часть.

Кстати, недавно появилось новая версия этого плагина (3.5.2). Поэтому прежде чем переходить к поиску, хочу отметить несколько изменений, которые в ней появились.
Принцип работы, конечно, остался тот же.
Но плагин теперь совместим с темами jQuery UI.
Это означает, что, во-первых, вы можете легко изменить оформление таблицы, а во-вторых, тему нужно загружать отдельно.

На странице загрузки плагина вы выбираете и скачиваете необходимые компоненты jqGrid, а после этого отдельно качаете тему jQuery UI.

Кроме того, появилась локализация, и русская версия входит в дистрибутив.

Теперь переходим к поиску.

Всего поддерживается 4 режима поиска:
— a toolbar searching
— a custom searching
— a single field searching
— a more complex approach involving many fields and conditions — advanced searching

Мы рассмотрим последний вариант (advanced searching), т.к. он самый сложный и позволяет искать сразу по нескольким полям.

Для использования этого варианта поиска нужно загрузить плагины Common, Form Edit, Search Plugin. И, конечно, понравившуюся тему jQuery UI.

Структура проекта будет такой.

index.html (страница с таблицей)
getdata.php (скрипт получения данных, используется как для отображения всех данных, так и для поиска
js/ (папка с jqGrid и библиотекой jQuery)
js/i18n/ (папка с файлами переводов)
css/ (папка со стилями)
css/smoothness/ (папка с темой jQuery UI)

Теперь создаем таблицу и добавляем поддержку поиска (index.html).

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.   <title>jqGrid поиск</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.   <meta name="description" content="jqGrid поиск" />
  11.   <meta name="keywords" content="jqGrid, javascript, jquery" />
  12.   
  13.   <link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.7.2.custom.css" />
  14.   <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
  15. </head>
  16. <body>
  17.   <table id="list"></table>
  18.   <div id="pager"></div>
  19.  
  20.   <p>Для поиска нажмите кнопку с изображением лупы (в левом нижнем углу)</p>
  21.   <p>Вы можете добавлять и удалять условия поиска с помощью кнопок "плюс" и "минус", которые расположены справа от условия.</p>
  22.   <p>Esc - закрывает форму поиска</p>
  23.   <p>Описание этого примера вы найдете в статье: <a href="http://www.simplecoding.org/jqgrid-poisk-dannyx.html">jqGrid - поиск данных</a>.</p>
  24.   
  25.   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  26.   <script type="text/javascript" src="js/i18n/grid.locale-ru.js"></script>
  27.   <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
  28.   <script type="text/javascript">
  29.   jQuery(document).ready(function(){
  30.     var lastSel;
  31.     jQuery("#list").jqGrid({
  32.       url:'getdata.php',
  33.       datatype: 'json',
  34.       mtype: 'POST',
  35.       colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
  36.       colModel :[
  37.         {name:'id', index:'id', width:50, align:'right', search:false}
  38.         ,{name:'surname', index:'surname', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
  39.         ,{name:'fname', index:'fname', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
  40.         ,{name:'lname', index:'lname', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
  41.         ],
  42.       pager: jQuery('#pager'),
  43.       rowNum:5,
  44.       rowList:[5,10,30],
  45.       sortname: 'id',
  46.       sortorder: "asc",
  47.       viewrecords: true,
  48.       caption: 'Данные пользователей',
  49.       ondblClickRow: function(id) {
  50.         if (id && id != lastSel) {
  51.           jQuery("#list").restoreRow(lastSel);
  52.           jQuery("#list").editRow(id, true);
  53.           lastSel = id;
  54.         }
  55.       },
  56.       editurl: 'saverow.php'
  57.     }).navGrid('#pager',{view:false, del:false, add:false, edit:false},
  58.       {}, // default settings for edit
  59.       {}, // default settings for add
  60.       {}, // delete instead that del:false we need this
  61.       {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
  62.       {} /* view parameters*/
  63.     );
  64.   });
  65.   </script>
  66. </body>
  67. </html>

* This source code was highlighted with Source Code Highlighter.

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

Прежде всего, обратите внимание на строки 37-40, в которых указываются настройки для полей (столбцов) таблицы.

Для поля id мы добавили параметр search:false, т.е. запретили поиск по этому полю.

Для остальных полей установлен параметр searchoptions
searchoptions:{sopt:['eq','ne','bw','cn']}

С его помощью мы задали доступные условия сравнения. Полный перечень этих настроек можно (и нужно 😉 ) посмотреть в документации к плагину, в данном случае мы использовали:

eq – равно;
ne – не равно;
bw – начинается с;
cn – содержит.

Т.к. в этом примере все поля текстовые, использовать сравнения вроде «больше» и «меньше» особого смысла не имеет.

Теперь обратите внимание на функцию navGrid (строки 57-63). В ней мы отключаем не нужные в данном случае кнопки (строка 57) и указываем настройки поиска (строка 61). Рассмотрим их подробнее:

multipleSearch:true – разрешает поиск сразу по нескольким полям;
closeOnEscape:true – окно поиска закроется при нажатии на клавишу «Esc»;
closeAfterSearch:true – окно поиска закроется после завершения поиска.

Естественно, это далеко не полный список параметров.

На данном этапе мы включили и настроили поиск на стороне клиента. И наша таблица должна выглядеть примерно так.

jqgrid_initial

В левом нижнем углу появилась кнопка «Найти записи» при нажатии на которую открывается окно поиска.

Все отлично, за исключением того, что плагин ничего не ищет 🙂

Дело в том, что при нажатии на кнопку «Найти» плагин только передает условия поиска серверному (php) скрипту, который и должен выполнить поиск.

В данном случае используется тот же скрипт, что и для первоначальной загрузки данных (getdata.php). И мы должны добавить в него поддержку поиска.

Принцип работы будет следующим.

1) Если получен обычный запрос (не поиск) – просто получаем нужно количество записей из БД и отправляем браузеру.

2) Если запрос на поиск. Добавляем условия поиска в запрос и возвращаем результат браузеру.

Теперь рассмотрим, какие параметры передаются браузером серверу при поисковом запросе.

_search true
filters {"groupOp":"AND","rules":[{"field":"surname","op":"eq","data":"Иванов"}]}
nd 1251656518553
page 1
rows 5
sidx id
sord asc

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

Наибольший интерес представляет второй параметр (filters). Эта строка содержит все условия поиска и записана она в формате JSON.

На практике это означает, что вы можете преобразовать её в объект с помощью функции json_decode.

Для этого примера вы получите такой объект

jqgrid_search_data

Как видите он содержит свойство groupOp значение которого равно AND. И свойство rules, которое содержит массив со всеми введенными условиями поиска.

В каждое условие входит три параметра:
field – имя поля;
op – тип операции сравнения;
data – данные для сравнения.

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

Обратите внимание. Нужно очень внимательно проверять полученные данные. Иначе ваш скрипт станет уязвимым.

Теперь посмотрите на код скрипта (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.   //подключаемся к базе
  12.   $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
  13.   //указываем, мы хотим использовать utf8
  14.   $dbh->exec('SET CHARACTER SET utf8');
  15.  
  16.   $qWhere = '';
  17.   //определяем команду (поиск или просто запрос на вывод данных)
  18.   //если поиск, конструируем WHERE часть запроса
  19.   if (isset($_POST['_search']) && $_POST['_search'] == 'true') {
  20.     $allowedFields = array('surname', 'fname', 'lname');
  21.     $allowedOperations = array('AND', 'OR');
  22.     
  23.     $searchData = json_decode($_POST['filters']);
  24.  
  25.     //ограничение на количество условий
  26.     if (count($searchData->rules) > 10) {
  27.       throw new Exception('Cool hacker is here!!! :)');
  28.     }
  29.  
  30.     $qWhere = ' WHERE ';
  31.     $firstElem = true;
  32.  
  33.     //объединяем все полученные условия
  34.     foreach ($searchData->rules as $rule) {
  35.       if (!$firstElem) {
  36.         //объединяем условия (с помощью AND или OR)
  37.         if (in_array($searchData->groupOp, $allowedOperations)) {
  38.           $qWhere .= ' '.$searchData->groupOp.' ';
  39.         }
  40.         else {
  41.           //если получили не существующее условие - возвращаем описание ошибки
  42.           throw new Exception('Cool hacker is here!!! :)');
  43.         }
  44.       }
  45.       else {
  46.         $firstElem = false;
  47.       }
  48.       
  49.       //вставляем условия
  50.       if (in_array($rule->field, $allowedFields)) {
  51.         switch ($rule->op) {
  52.           case 'eq': $qWhere .= $rule->field.' = '.$dbh->quote($rule->data); break;
  53.           case 'ne': $qWhere .= $rule->field.' <> '.$dbh->quote($rule->data); break;
  54.           case 'bw': $qWhere .= $rule->field.' LIKE '.$dbh->quote($rule->data.'%'); break;
  55.           case 'cn': $qWhere .= $rule->field.' LIKE '.$dbh->quote('%'.$rule->data.'%'); break;
  56.           default: throw new Exception('Cool hacker is here!!! :)');
  57.         }
  58.       }
  59.       else {
  60.         //если получили не существующее условие - возвращаем описание ошибки
  61.         throw new Exception('Cool hacker is here!!! :)');
  62.       }
  63.     }
  64.   }
  65.   
  66.   //определяем количество записей в таблице
  67.   $rows = $dbh->query('SELECT COUNT(id) AS count FROM users'.$qWhere);
  68.   $totalRows = $rows->fetch(PDO::FETCH_ASSOC);
  69.  
  70.   $firstRowIndex = $curPage * $rowsPerPage - $rowsPerPage;
  71.   //получаем список пользователей из базы
  72.   $res = $dbh->query('SELECT * FROM users '.$qWhere.' ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);
  73.   
  74.   //сохраняем номер текущей страницы, общее количество страниц и общее количество записей
  75.   $response->page = $curPage;
  76.   $response->total = ceil($totalRows['count'] / $rowsPerPage);
  77.   $response->records = $totalRows['count'];
  78.  
  79.   $i=0;
  80.   while($row = $res->fetch(PDO::FETCH_ASSOC)) {
  81.     $response->rows[$i]['id']=$row['id'];
  82.     $response->rows[$i]['cell']=array($row['id'], $row['surname'], $row['fname'], $row['lname']);
  83.     $i++;
  84.   }
  85.   echo json_encode($response);
  86. }
  87. catch (Exception $e) {
  88.   echo json_encode(array('errMess'=>'Error: '.$e->getMessage()));
  89. }
  90.  
  91. // end of getdata.php

* This source code was highlighted with Source Code Highlighter.

Тут тоже мы рассмотрим только ту часть, которая касается поиска.

Прежде всего, мы проверяем параметр $_POST['_search'] (строка 19). Если он равен true, начинаем конструировать запрос.

В строках 20 и 21 объявлены два массива с перечнями полей, по которым разрешен поиск ($allowedFields) и допустимых логических операций ($allowedOperations).

Если параметры, отправленные браузером, не будут входить в эти массивы, то мы расцениваем такую ситуацию как попытку атаки (SQLInjection).

После этого, мы декодируем параметр $_POST['filters'] (строка 23). И сразу проверяем общее количество условий поиска (строки 26-28).

Дело в том, что существует уязвимость, связанная с выполнением длинных запросов.

Поэтому мы ограничим количество условий десятью (цифра взята «с потолка»).

После этого начинаем формировать строку WHERE с условиями (строки 30-63).

Мы перебираем массив $searchData->rules и для каждого элемента конструируем соответствующее условие.

При этом мы выполняем следующие проверки.

1) С помощью функции in_array мы проверяем, входит ли значение $searchData->groupOp в массив $allowedOperations (строка 37). Если да, то добавляем оператор, если нет – считаем, что кто-то пытается провести SQLInjection.

2) Такой же принцип используем и при обработке имен полей таблицы, по которым выполняется поиск (строка 50). Кстати этот метод защиты можно использовать для ограничения доступа к части полей таблицы. Например, если вы не показываете часть полей, которые есть в БД, то логично запретить и поиск по ним.

3) При добавлении условия используем оператор switch со всеми допустимыми сравнениями (строки 51-57).

4) С помощью $dbh->quote(…) экранируем спецсимволы во всех значения, введенных пользователем (строки 52-55).

После этого просто добавляем строку $qWhere к запросам (строки 67 и 72).

Дальнейшее описание работы скрипта вы найдете в первой части.

В общем, разница между обычным отображением данных из таблицы и поиском сводится к выполнению более сложного запроса (с условиями).

Для формы, изображенной на следующем рисунке

jqgrid_search_form

мы получим такой запрос

SELECT * FROM users WHERE surname = 'Иванов' AND fname LIKE '%ван%' AND lname LIKE 'И%' ORDER BY id asc LIMIT 0, 5

Надеюсь, принцип работы вы поняли. Если есть вопросы – спрашивайте, постараюсь ответить.

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

Памятники водопроводчикам и сантехникам

  • > Мы рассмотрим последний вариант (advanced searching), т.к.
    > он самый сложный и позволяет искать сразу по нескольким полям.

    Я не знаю как называется вариант, который использую я, однако он позволяет тоже сразу по нескольким полям икать и это выглядит так: http://easycaptures.com/fs/uploaded/345/6947605272.png

    • Есть вопрос. Вы использовали параметр multipleSearch:true?
      Просто судя скриншоту добавлять поля нельзя.

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

      • Евгений

        При добавлении второго условия в поиске в FIREFOX всё отрабатывается как положено, т.е. делаю вывод, что формируется правильный sql-запрос. Тот же самый запрос в IE7 не работает, т.е. отрабатывает только запрос с одним условием. Где рыть?

        • Похоже это проблема jqGrid, точнее его поддержки IE. Серверный (PHP) скрипт правильно сформирует запрос только если получит все необходимые данные. А IE, похоже, передаёт только первое условие. В Safari, Опере и FF всё работает нормально.

        • Евгений

          Да, спасибо! Подбросил jquery.jqGrid.min.js версии 3.6.1 и счастье появилось! Спасибо большое за подсказку!

  • > Мы рассмотрим последний вариант (advanced searching), т.к.
    > он самый сложный и позволяет искать сразу по нескольким полям.

    Я не знаю как называется вариант, который использую я, однако он позволяет тоже сразу по нескольким полям икать и это выглядит так: http://easycaptures.com/fs/uploaded/345/6947605272.png

    • Есть вопрос. Вы использовали параметр multipleSearch:true?
      Просто судя скриншоту добавлять поля нельзя.

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

      • Евгений

        При добавлении второго условия в поиске в FIREFOX всё отрабатывается как положено, т.е. делаю вывод, что формируется правильный sql-запрос. Тот же самый запрос в IE7 не работает, т.е. отрабатывает только запрос с одним условием. Где рыть?

        • Похоже это проблема jqGrid, точнее его поддержки IE. Серверный (PHP) скрипт правильно сформирует запрос только если получит все необходимые данные. А IE, похоже, передаёт только первое условие. В Safari, Опере и FF всё работает нормально.

        • Евгений

          Да, спасибо! Подбросил jquery.jqGrid.min.js версии 3.6.1 и счастье появилось! Спасибо большое за подсказку!

  • AlexZareckij

    Спасибо за статью!
    Любопытно было бы узнать какое количестве записей в jqGrid вытягивает напр., ие? (отобразить, искать итд)
    Когда появляется лаг?

    Спасибо

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

  • AlexZareckij

    Спасибо за статью!
    Любопытно было бы узнать какое количестве записей в jqGrid вытягивает напр., ие? (отобразить, искать итд)
    Когда появляется лаг?

    Спасибо

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

  • На демо страничке поиск не работает. Сначала подумал что это из за Хрома, попробовал Mozilla тоже не ищет. Когда нажимаю искать по имени «Сергей» появляется иконка ожидания и все остается на месте ))

    • Большое спасибо за замечание!
      Исправил.
      Когда переносил скрипт на хостинг забыл, что там другие настройки.

      • Poweslave

        Спасибо =)

      • inpozitiv

        Позвольте узнать, а какие именно настройки отвечают за поиск? А то та же проблема — при переносе svn-ом(!) все сломалось..

        • inpozitiv

          впрочем, проблема решилась — magic quotes были on 🙂

  • На демо страничке поиск не работает. Сначала подумал что это из за Хрома, попробовал Mozilla тоже не ищет. Когда нажимаю искать по имени «Сергей» появляется иконка ожидания и все остается на месте ))

    • Большое спасибо за замечание!
      Исправил.
      Когда переносил скрипт на хостинг забыл, что там другие настройки.

      • Poweslave

        Спасибо =)

  • Tema

    Уже нашел ошибку.
    В опубликованном примере, если перейти на вторую страничку данных в jgrid, при установленной пагинации в 5 записей, а потом изменить пагинацию на большее число записей, данные не отображаются и перейти на первую страницу становится невозможным

    • Спасибо. Я не обращал на этот момент внимания.
      В любом случае проблема решается добавлением проверок в серверном скрипте или простым кликом по кнопке «Обновить» 😉

  • Tema

    Уже нашел ошибку.
    В опубликованном примере, если перейти на вторую страничку данных в jgrid, при установленной пагинации в 5 записей, а потом изменить пагинацию на большее число записей, данные не отображаются и перейти на первую страницу становится невозможным

    • Спасибо. Я не обращал на этот момент внимания.
      В любом случае проблема решается добавлением проверок в серверном скрипте или простым кликом по кнопке «Обновить» 😉

  • Евгений

    Спасибо за пример!!! Скачал со странички файлы, сделал все как написано(создал БД, скопировал файлы), но поиск так и не работает! Вижу данные, могу их исправлять, а вот поиск не работает! Подскажите пожалуйста в чем ошибка?

    • Попробуйте так.
      Создайте в папке с примером файл .htaccess с одной строчкой

      php_flag magic_quotes_gpc Off

      • Евгений

        Создание такого файла действительно помогает, но как быть при использовании IIS? Полный список данных ( без условий) выводится, а при добавлении в запрос условия поиска — пустота. Смотрю firebug — в post параметры filters — они идентичны и при использовании АПАЧ и IIS ,но во втором случае ответ такой{«page»:»1",»total»:0,»records»:»0"}.
        Начал ковырять php.ini — после установки magic_quotes_gpc = Off,magic_quotes_runtime = Off,magic_quotes_sybase = Off начал работать поиск если в условиях используются цифры, а с буковками — проблема. Что и где покопать? может с кодировкой что-то ? Или еще где-то «подкрутить» надо?

        • Насчет IIS ничего конкретного не скажу, т.к. с ним не работал.

          В первую очередь нужно посмотреть, в каком виде параметры получает скрипт, т.е. просто вывести полученные параметры (echo $_POST['…']) и посмотреть их в firebug.
          Если в них есть лишние кавычки или спецсимволы, то в крайнем случае, их можно убрать прямо в скрипте.

  • Евгений

    Спасибо за пример!!! Скачал со странички файлы, сделал все как написано(создал БД, скопировал файлы), но поиск так и не работает! Вижу данные, могу их исправлять, а вот поиск не работает! Подскажите пожалуйста в чем ошибка?

    • Попробуйте так.
      Создайте в папке с примером файл .htaccess с одной строчкой

      php_flag magic_quotes_gpc Off

      • Евгений

        Создание такого файла действительно помогает, но как быть при использовании IIS? Полный список данных ( без условий) выводится, а при добавлении в запрос условия поиска — пустота. Смотрю firebug — в post параметры filters — они идентичны и при использовании АПАЧ и IIS ,но во втором случае ответ такой{«page»:»1",»total»:0,»records»:»0"}.
        Начал ковырять php.ini — после установки magic_quotes_gpc = Off,magic_quotes_runtime = Off,magic_quotes_sybase = Off начал работать поиск если в условиях используются цифры, а с буковками — проблема. Что и где покопать? может с кодировкой что-то ? Или еще где-то «подкрутить» надо?

        • Насчет IIS ничего конкретного не скажу, т.к. с ним не работал.

          В первую очередь нужно посмотреть, в каком виде параметры получает скрипт, т.е. просто вывести полученные параметры (echo $_POST['…']) и посмотреть их в firebug.
          Если в них есть лишние кавычки или спецсимволы, то в крайнем случае, их можно убрать прямо в скрипте.

  • Евгений

    Спасибо все заработало!!!

  • Евгений

    Спасибо все заработало!!!

  • Санёк

    Вот мне интересно, а можно в форме поиска сделать так, чтоб можно было: Выбрать поле (напр. организация), потом выбрать Равно и сделать комбобокс, в который будут подтягиваться данные с mysql (список организаций). Заранее спасибо за ответ.

    • Сделать такое однозначно можно. Я правда не уверен что будет проще написать такую форму с нуля или ковыряться в настройках jqGrid.
      Если делать с нуля, то нужна форма с двумя полями. В первом — выбор поля БД, на второе повесить какую-нибудь библиотеку автозаполения (autocomplete), например, эту.

  • Санёк

    Вот мне интересно, а можно в форме поиска сделать так, чтоб можно было: Выбрать поле (напр. организация), потом выбрать Равно и сделать комбобокс, в который будут подтягиваться данные с mysql (список организаций). Заранее спасибо за ответ.

    • Сделать такое однозначно можно. Я правда не уверен что будет проще написать такую форму с нуля или ковыряться в настройках jqGrid.
      Если делать с нуля, то нужна форма с двумя полями. В первом — выбор поля БД, на второе повесить какую-нибудь библиотеку автозаполения (autocomplete), например, эту.

  • Санёк

    Спасибо. Наверное, сделаю уже по старинке, а то проект горит, так будет быстрее. А потом уже на досуге поэкспериментирую. И за уроки спасибо. Очень полезные!

  • Санёк

    Спасибо. Наверное, сделаю уже по старинке, а то проект горит, так будет быстрее. А потом уже на досуге поэкспериментирую. И за уроки спасибо. Очень полезные!

  • Санёк

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

    У меня один скрипт php, в котором есть форма, где выбираются параметры поиска, action формы настроен на этот же скрипт, т.е. здесь же POST-данные получаются и на основе них строится запрос, результаты которого собственно и нужно отобразить в Grid.
    Подскажите, плиз, кто чем сможет 🙂
    Заранее благодарен.
    С уважением

    • А скрипты из этой и предыдущих статей вы пробовали запускать? У меня они 100% работают. Можете сравнить (построчно) со своими и найти ошибку.

  • Санёк

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

    У меня один скрипт php, в котором есть форма, где выбираются параметры поиска, action формы настроен на этот же скрипт, т.е. здесь же POST-данные получаются и на основе них строится запрос, результаты которого собственно и нужно отобразить в Grid.
    Подскажите, плиз, кто чем сможет 🙂
    Заранее благодарен.
    С уважением

    • А скрипты из этой и предыдущих статей вы пробовали запускать? У меня они 100% работают. Можете сравнить (построчно) со своими и найти ошибку.

  • Санёк

    да, я взял скрипт с одной из ваших статей. когда его ставлю в обычную html-страницу — всё ок, получает и отображает данные. только встраиваю его вовнутрь php-скрипта — он перестаёт работать, а сверху выводится JSON-строка…Отмечу, что в jqGrid скрипте в качестве url я указываю тот php-скрипт, в который я его встраиваю.

    • Т.е. если вы просто переименовываете html файл из моего примера в php он перестает работать?
      Или он не работает внутри вашего php скрипта?

      • Санёк

        внутри моего php-скрипта

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

  • Санёк

    да, я взял скрипт с одной из ваших статей. когда его ставлю в обычную html-страницу — всё ок, получает и отображает данные. только встраиваю его вовнутрь php-скрипта — он перестаёт работать, а сверху выводится JSON-строка…Отмечу, что в jqGrid скрипте в качестве url я указываю тот php-скрипт, в который я его встраиваю.

    • Т.е. если вы просто переименовываете html файл из моего примера в php он перестает работать?
      Или он не работает внутри вашего php скрипта?

      • Санёк

        внутри моего php-скрипта

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

  • Роман

    Попытался добавить к данному примеру строку, добавляющую верхнюю поисковую панель ->
    jQuery(«#list»).filterToolbar(); Получается следующее:
    1. Строка поиска добавляется
    2. Поиск с Вашего примера работает
    3. Поиск с filterToolbar — не работает, не создается переменная _POST[filters]
    Поможете решить задачку?

  • Роман

    Попытался добавить к данному примеру строку, добавляющую верхнюю поисковую панель ->
    jQuery(«#list»).filterToolbar(); Получается следующее:
    1. Строка поиска добавляется
    2. Поиск с Вашего примера работает
    3. Поиск с filterToolbar — не работает, не создается переменная _POST[filters]
    Поможете решить задачку?

  • Роман

    и как оказалось она недолжна создаваться 🙂

    When the search is activated, an array of type name:value is posted to the server. Note that this array is added to the postData parameter. We post only fields that have an entered value. When we clear the the search form, the values are deleted from the postData array. When posting to the server, we try to pass, not the name, but the index set in colModel. When the index is not found we use the name. Additionally, we add a _search=true to the posted data.

    придется править getdata.php под это.

    • да, в таких ситуация нужно подстраиваться под плагин. Смотреть какие данные он отправляет и обрабатывать их.

  • Роман

    и как оказалось она недолжна создаваться 🙂

    When the search is activated, an array of type name:value is posted to the server. Note that this array is added to the postData parameter. We post only fields that have an entered value. When we clear the the search form, the values are deleted from the postData array. When posting to the server, we try to pass, not the name, but the index set in colModel. When the index is not found we use the name. Additionally, we add a _search=true to the posted data.

    придется править getdata.php под это.

    • да, в таких ситуация нужно подстраиваться под плагин. Смотреть какие данные он отправляет и обрабатывать их.

  • Роман

    Делаю отображение данных таблички MySQL в jqGrid. Почему-то долго формируется сам грид — порядка 7-и секунд (записей всего 10 штук). Может кто сталкивался с такой проблемкой?

    • Проверьте (из консоли) сколько времени выполняется запрос к базе.

      • Роман

        Запрос занял 0.0016 сек. Сделал копию базы на другой хост — грид сформировался за 1.5 сек. Видимо что-то с тем сервером.

  • Роман

    Делаю отображение данных таблички MySQL в jqGrid. Почему-то долго формируется сам грид — порядка 7-и секунд (записей всего 10 штук). Может кто сталкивался с такой проблемкой?

    • Проверьте (из консоли) сколько времени выполняется запрос к базе.

      • Роман

        Запрос занял 0.0016 сек. Сделал копию базы на другой хост — грид сформировался за 1.5 сек. Видимо что-то с тем сервером.

  • goth

    никто не сталкивался с проблемой задвоения кнопок в навибаре?
    <table class="ui-pg-table navtable" …
    <table class="ui-pg-table navtable" …

    • Я сам не сталкивался. Но если вы можете выложить где-нибудь ваш скрипт я посмотрю.

      • goth

        спасибо, за отклик, вот мой скрипт …
        http://onsib.ru/jslib.php
        http://onsib.ru/doublebar.jpg

        • Попробуйте явно указать какие кнопки вам нужны.

          Т.е. вместо вызова
          …navGrid();
          использовать что-то вроде
          .navGrid('#pager',{edit:false,add:false,del:false,refresh:false,searchtext:»Find»})
          из этого примера

        • goth

          не помогло, задваивает и их 🙂

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

  • goth

    никто не сталкивался с проблемой задвоения кнопок в навибаре?
    <table class="ui-pg-table navtable" …
    <table class="ui-pg-table navtable" …

    • Я сам не сталкивался. Но если вы можете выложить где-нибудь ваш скрипт я посмотрю.

      • goth

        спасибо, за отклик, вот мой скрипт …
        http://onsib.ru/jslib.php
        http://onsib.ru/doublebar.jpg

        • Попробуйте явно указать какие кнопки вам нужны.

          Т.е. вместо вызова
          …navGrid();
          использовать что-то вроде
          .navGrid('#pager',{edit:false,add:false,del:false,refresh:false,searchtext:»Find»})
          из этого примера

        • goth

          не помогло, задваивает и их 🙂

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

  • Игорь

    Есть такая проблемка: у меня данные берутся из разных таблиц бд.И в запросе WHERE уже присутствует, а в скрипте еще появляется WHERE когда мы включаем поиск!Что делать та?

    • Роман

      Например:
      Делать первый запрос SELECT_INTO_TABLE — формируется промежуточная таблица по которой делаем дальнейший поиск.

    • Понимаете, мой скрипт — это только пример использования. Для работы плагина вы должны предоставить данные. Откуда вы их возьмете из БД, из файла, получите XML-RPC запросом, не важно.

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

      Решение Романа самое простое. Так вам скорее всего практически не придется переписывать код. Но в результате у вас будет выполняться 2 запроса вместо одного.

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

  • Игорь

    Есть такая проблемка: у меня данные берутся из разных таблиц бд.И в запросе WHERE уже присутствует, а в скрипте еще появляется WHERE когда мы включаем поиск!Что делать та?

    • Роман

      Например:
      Делать первый запрос SELECT_INTO_TABLE — формируется промежуточная таблица по которой делаем дальнейший поиск.

    • Понимаете, мой скрипт — это только пример использования. Для работы плагина вы должны предоставить данные. Откуда вы их возьмете из БД, из файла, получите XML-RPC запросом, не важно.

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

      Решение Романа самое простое. Так вам скорее всего практически не придется переписывать код. Но в результате у вас будет выполняться 2 запроса вместо одного.

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

  • MIV (Игорь)

    Замечательный пример!
    Очень даже пригодился! Вот тока после переделки у меня почему-то не работает добавление новой записи (хотя add:true). Модальное окно открывается, но по «Сохранить» ничего не добавляется 🙁 Подскажите, пожалуйста, куда копать.

    • Копать нужно firebug'ом. Прежде всего проверить адрес скрипта, который вызывается при нажатии на кнопку «Сохранить». Потом посмотреть параметры, которые отправляются (названия и значения). Убедиться, что серверный скрипт читает эти же параметры. И, конечно, посмотреть ответ скрипта.

  • MIV (Игорь)

    Замечательный пример!
    Очень даже пригодился! Вот тока после переделки у меня почему-то не работает добавление новой записи (хотя add:true). Модальное окно открывается, но по «Сохранить» ничего не добавляется 🙁 Подскажите, пожалуйста, куда копать.

    • Копать нужно firebug'ом. Прежде всего проверить адрес скрипта, который вызывается при нажатии на кнопку «Сохранить». Потом посмотреть параметры, которые отправляются (названия и значения). Убедиться, что серверный скрипт читает эти же параметры. И, конечно, посмотреть ответ скрипта.

  • Виталий

    Здравствуйте!
    Я в JS и PHP новичек и не совсем понимаю что да как…
    вот предстала перед мной задача. выводить данные в таблице с возможностью сортировки и фильтрации, покопался. Решил что jqGrid довольно красивый и относительно простой способ решения.
    Вобщем из примеров на http://trirand.com/jqgrid/jqgrid.html я выбрал Integrated Search Toolbar (из 3.5 версии)
    Могли бы вы мне помочь как новичку в установке этой таблички, а заполнение я уж как нибудь сам.)
    Заранее спасибо!

    • Помочь я могу, но ответами на конкретные вопросы. В том примере приведены исходники и для начала их нужно просто вставить в вашу страницу. У вас эту часть выполнить получилось или нет?

  • Виталий

    Здравствуйте!
    Я в JS и PHP новичек и не совсем понимаю что да как…
    вот предстала перед мной задача. выводить данные в таблице с возможностью сортировки и фильтрации, покопался. Решил что jqGrid довольно красивый и относительно простой способ решения.
    Вобщем из примеров на http://trirand.com/jqgrid/jqgrid.html я выбрал Integrated Search Toolbar (из 3.5 версии)
    Могли бы вы мне помочь как новичку в установке этой таблички, а заполнение я уж как нибудь сам.)
    Заранее спасибо!

    • Помочь я могу, но ответами на конкретные вопросы. В том примере приведены исходники и для начала их нужно просто вставить в вашу страницу. У вас эту часть выполнить получилось или нет?

  • Виталий

    получилось. теперь встала проблема с заполнением таблички.
    есть табличка mysql где есть поля title, short_story, xfields, alt_name. надо чтобы скрипт взял из них данные и перенес их в табличку. пробовал всяко! переносит только alt_name (данные например: o-sozdanii-interesnykh-modelejj-sociumov) id (просто число) и все! как я ни пытлся, нивкакую не хочет переносить title (кирилица с пробелами) и xfields (смесь чисел лат.букв и символов |)
    help!

  • Виталий

    получилось. теперь встала проблема с заполнением таблички.
    есть табличка mysql где есть поля title, short_story, xfields, alt_name. надо чтобы скрипт взял из них данные и перенес их в табличку. пробовал всяко! переносит только alt_name (данные например: o-sozdanii-interesnykh-modelejj-sociumov) id (просто число) и все! как я ни пытлся, нивкакую не хочет переносить title (кирилица с пробелами) и xfields (смесь чисел лат.букв и символов |)
    help!

  • Виталий

    так.. похоже скрипт умеет переносить только поля без пробелов и латиницей… а надо чтоб все красиво было!((
    кто может подскажите!

    • Только что попробовал. В моем демонстрационном примере отлично сохраняется текст (кириллица) с пробелами. Какие кодировки используются в вашей БД? Должно быть UTF-8.

  • Виталий

    так.. похоже скрипт умеет переносить только поля без пробелов и латиницей… а надо чтоб все красиво было!((
    кто может подскажите!

    • Только что попробовал. В моем демонстрационном примере отлично сохраняется текст (кириллица) с пробелами. Какие кодировки используются в вашей БД? Должно быть UTF-8.

  • Виталий

    сведения из phpmyadmin
    MySQL-кодировка: UTF-8 Unicode (utf8)
    Сопоставление соединения с MySQL: utf8_unicode_ci
    сравнение плей cp12-51
    проблема решается только сменой кодировки?
    попытался поменять сравнение:
    Ответ MySQL:
    #1283 — Column 'title' cannot be part of FULLTEXT index

  • Виталий

    сведения из phpmyadmin
    MySQL-кодировка: UTF-8 Unicode (utf8)
    Сопоставление соединения с MySQL: utf8_unicode_ci
    сравнение плей cp12-51
    проблема решается только сменой кодировки?
    попытался поменять сравнение:
    Ответ MySQL:
    #1283 — Column 'title' cannot be part of FULLTEXT index

  • Виталий

    ладно, сравнение удалось изменить, но таблице лучше не стало.

  • Виталий

    ладно, сравнение удалось изменить, но таблице лучше не стало.

  • Виталий

    могу кинуть php и js файлики.. просто сам думаю не разберусь..

  • Виталий

    могу кинуть php и js файлики.. просто сам думаю не разберусь..

  • Дмитрий

    не подскажете как установить фильтр прямо в таблице?

  • Дмитрий

    не подскажете как установить фильтр прямо в таблице?

  • Дмитрий

    да я его уже смотрел сто раз. Мой проект использует jqGrid-3.4.1(stable)

    а это фильтр в новой версии 3.5 в 3.4 он наверно не работает?

    • Роман

      Эта ссылка на кусок моего проекта, там реализован фильтр.

  • Дмитрий

    да я его уже смотрел сто раз. Мой проект использует jqGrid-3.4.1(stable)

    а это фильтр в новой версии 3.5 в 3.4 он наверно не работает?

    • Роман

      Эта ссылка на кусок моего проекта, там реализован фильтр.

  • Виталий

    роман, если твой, то не мог бы ты выложить как ты сделал вывод кирилицы? пхп файл и примерную структуру БД

  • Виталий

    роман, если твой, то не мог бы ты выложить как ты сделал вывод кирилицы? пхп файл и примерную структуру БД

  • Виталий

    скинул
    хе) к вечеру. у меня уже 9 вечера) можешь сейчас найти ответить?

    • Дмитрий

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

  • Виталий

    скинул
    хе) к вечеру. у меня уже 9 вечера) можешь сейчас найти ответить?

    • Дмитрий

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

  • Виталий

    Ура! Получилось!)) Спасибо! но теперь встала проблема переноса по строкам в таблице т.к. в одном поле у меня оч большая статья

    • Увеличьте насколько возможно ширину столбца, а для редактирования используйте textarea (edittype:'textarea').

  • Виталий

    Ура! Получилось!)) Спасибо! но теперь встала проблема переноса по строкам в таблице т.к. в одном поле у меня оч большая статья

    • Увеличьте насколько возможно ширину столбца, а для редактирования используйте textarea (edittype:'textarea').

  • Виталий

    http://orkclub.ru/index.php?do=calendar
    это моя табличка. в поле краткое описание оч много текста. надо чтоб он автоматически переносился по срокам, а не вылезал за края поля

    • Попробуйте так.
      1) Отключите правило
      white-space:nowrap;
      в файле grid.css (table.scroll tbody td {…})
      2) Можно добавить
      word-wrap:break-word;

  • Виталий

    http://orkclub.ru/index.php?do=calendar
    это моя табличка. в поле краткое описание оч много текста. надо чтоб он автоматически переносился по срокам, а не вылезал за края поля

    • Попробуйте так.
      1) Отключите правило
      white-space:nowrap;
      в файле grid.css (table.scroll tbody td {…})
      2) Можно добавить
      word-wrap:break-word;

  • Виталий

    а как можно сделать сортировку по дате? просто так не получается..

    • Параметры сортировки указываются при настройке плагина.

      sortname – поле, которое по-умолчанию используется для сортировки;
      sortorder – порядок сортировки.

      • Виталий

        да, я это знаю.дата в формате дд.мм.гггг ,но когда я так делаю у меня сортировка идет по дд

        • Есть параметр datefmt, он позволяет менять формат (кстати, по умолчанию Y-m-d, такие даты должны правильно сортироваться).
          Кроме того, в документации я читал, что даты типа «05 янв 2009» правильно отсортировать нельзя.

          Пока придумал только одно решение (не очень красивое). Добавить столбец (скрытый) и сортировать по значениям в нем.

  • Виталий

    а как можно сделать сортировку по дате? просто так не получается..

    • Параметры сортировки указываются при настройке плагина.

      sortname – поле, которое по-умолчанию используется для сортировки;
      sortorder – порядок сортировки.

      • Виталий

        да, я это знаю.дата в формате дд.мм.гггг ,но когда я так делаю у меня сортировка идет по дд

        • Есть параметр datefmt, он позволяет менять формат (кстати, по умолчанию Y-m-d, такие даты должны правильно сортироваться).
          Кроме того, в документации я читал, что даты типа «05 янв 2009» правильно отсортировать нельзя.

          Пока придумал только одно решение (не очень красивое). Добавить столбец (скрытый) и сортировать по значениям в нем.

  • PoWl

    Hi, I want to thank you for posting your sample code. Also if I couldn't understand anything besides the code (I am from Germany) I found your sample code really helpful! Thank you! 🙂
    PoWl

    • Thanks! Feel free to ask any questions about the code I will try to answer 😉

  • PoWl

    Hi, I want to thank you for posting your sample code. Also if I couldn't understand anything besides the code (I am from Germany) I found your sample code really helpful! Thank you! 🙂
    PoWl

    • Thanks! Feel free to ask any questions about the code I will try to answer 😉

  • Виталий

    Это снова я! код пхп я сдернул с документации. т.е там есть такие строки
    $page = $_REQUEST['page']; // get the requested page
    $limit = $_REQUEST['rows']; // get how many rows we want to have into the grid
    $sidx = $_REQUEST['sidx']; // get index row - i.e. user click to sort
    $sord = $_REQUEST['sord']; // get the direction
    if(!$sidx) $sidx =1;

    $wh = "";
    $searchOn = Strip($_REQUEST['_search']);
    if($searchOn=='true') {
    $sarr = Strip($_REQUEST);
    foreach( $sarr as $k=>$v) {
    switch ($k) {
    //далее идет по моей базе
    case 'title':
    $wh .= " AND title LIKE '%.$v.%'";
    break;
    case 'short_story':
    $wh .= " AND short_story LIKE '%.$v.%'";
    break;
    case 'xfields':
    $wh .= " AND xfields LIKE '%place|.$v.%'";//этот и следующие 2 варианта находятся в поле xfields (в одной строкой)
    break;
    case 'datebegin':
    $wh .= " AND xfields LIKE '%ridatebegin|.$v.%'";
    break;
    case 'dateend':
    $wh .= " AND xfields LIKE '%ridateend|.$v.%'";
    break;
    }
    }
    }

    потом, когда надо выводить таблицу я разделываю эту строку (что в поле xfields) на 3 поля в таблице jqgrid. а сортировать он по ним не хочет((
    может поможет кто? (в базе нет полей datebegin и dateend)

    • Если я правильно понял, вы из поля xfields делаете три, а потом хотите сортировать каждое из них отдельно?

      Если да, то проблема следующая. Сам jqGrid ничего не сортирует. Когда вы нажимаете на кнопку сортировки (стрелки около названия стролбца) он просто отправляет ajax запрос вашему php скрипту, а потом просто показывает результат. Естественно в параметрах запроса передается и название поля, и необходимое направление сортировки.
      Т.е. вам нужно в php скрипт добавить обработку этих полей.
      Наверное, проще всего будет использовать switch и в него вставить 3 запроса (для каждого поля) с операторами LIKE.

  • Виталий

    Это снова я! код пхп я сдернул с документации. т.е там есть такие строки
    $page = $_REQUEST['page']; // get the requested page
    $limit = $_REQUEST['rows']; // get how many rows we want to have into the grid
    $sidx = $_REQUEST['sidx']; // get index row - i.e. user click to sort
    $sord = $_REQUEST['sord']; // get the direction
    if(!$sidx) $sidx =1;

    $wh = "";
    $searchOn = Strip($_REQUEST['_search']);
    if($searchOn=='true') {
    $sarr = Strip($_REQUEST);
    foreach( $sarr as $k=>$v) {
    switch ($k) {
    //далее идет по моей базе
    case 'title':
    $wh .= " AND title LIKE '%.$v.%'";
    break;
    case 'short_story':
    $wh .= " AND short_story LIKE '%.$v.%'";
    break;
    case 'xfields':
    $wh .= " AND xfields LIKE '%place|.$v.%'";//этот и следующие 2 варианта находятся в поле xfields (в одной строкой)
    break;
    case 'datebegin':
    $wh .= " AND xfields LIKE '%ridatebegin|.$v.%'";
    break;
    case 'dateend':
    $wh .= " AND xfields LIKE '%ridateend|.$v.%'";
    break;
    }
    }
    }

    потом, когда надо выводить таблицу я разделываю эту строку (что в поле xfields) на 3 поля в таблице jqgrid. а сортировать он по ним не хочет((
    может поможет кто? (в базе нет полей datebegin и dateend)

    • Если я правильно понял, вы из поля xfields делаете три, а потом хотите сортировать каждое из них отдельно?

      Если да, то проблема следующая. Сам jqGrid ничего не сортирует. Когда вы нажимаете на кнопку сортировки (стрелки около названия стролбца) он просто отправляет ajax запрос вашему php скрипту, а потом просто показывает результат. Естественно в параметрах запроса передается и название поля, и необходимое направление сортировки.
      Т.е. вам нужно в php скрипт добавить обработку этих полей.
      Наверное, проще всего будет использовать switch и в него вставить 3 запроса (для каждого поля) с операторами LIKE.

  • Егор

    столкнулся с проблемой фильтрации/поиска при помощи своих контролов. Для «задумчивых» пользователей форма поиска очень сложна и мне необходимо добавить возможность фильтрации при помощи отдельно стоящего селекта и кнопки (условно).
    Можно конечно писать параметры в GET но это в моём случае не есть хорошо.

    Можно ли самому как-то менять значения _search и filters?

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

  • Егор

    столкнулся с проблемой фильтрации/поиска при помощи своих контролов. Для «задумчивых» пользователей форма поиска очень сложна и мне необходимо добавить возможность фильтрации при помощи отдельно стоящего селекта и кнопки (условно).
    Можно конечно писать параметры в GET но это в моём случае не есть хорошо.

    Можно ли самому как-то менять значения _search и filters?

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

  • Мопед

    Люди добрые памагите! сделал как в документации http://trirand.com/jqgrid/jqgrid.html Advanced->Search Big Sets но ничего неработает. Немогу сформировать запрос к БД пАмагите. Укажите плз! на возможную ошибку.

    • Понимаете, ответить на вопрос «помогите, ничего не работает» практически не возможно. Я не знаю какая у вас база, какие данные вы хотите получить, какие ошибки возникают.

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

      P.S. Оставлять в комментариях скрипты целиком — не правильно 🙂

      • Мопед

        код полностью с этой страницы
        http://trirand.com/jqgrid/jqgrid.html далее Advanced->Search Big Sets
        таблица есть но у меня проблема с динамическим поиском да и с обычным тоже
        (это копия с указанной выше страницы /который у меня отказывается работать/)
        if(isset($_GET[«nm_mask»]))
        $nm_mask = $_GET['nm_mask'];
        else $nm_mask = «»;
        if(isset($_GET[«cd_mask»]))
        $cd_mask = $_GET['cd_mask'];
        else $cd_mask = «»;
        //construct where clause
        $where = «WHERE 1=1"; // может ошибка здесь? если ставишь вместо 1=1 например item_id=1 то в таблице только эта запись с item_id=1
        тогда что нужно записать?
        if($nm_mask!=») $where.= » AND item LIKE '$nm_mask%'»; if($cd_mask!=») $where.= » AND item_cd LIKE '$cd_mask%'»;

        БД mysql выбор по 1 таблице items в таблице item_id, item, item_cd
        вот cам запрос
        $SQL = «SELECT * FROM items «.$where.» ORDER BY $sidx $sord LIMIT $start , $limit»;

        ОШИБКИ НЕ ВОЗНИКАЮТ скрипт пишет что идет загрузка(отбор данных по условию) а дальше ничего не происходи! я так пологаю что неверна конструкция $where

        Спасибо за быстрый ответ!

        • Конструкция WHERE правильная, т.к. «WHERE 1=1» должно возвращать true, т.е. это тот же запрос, что и без WHERE вообще. Они его использовали чтобы добавлять к нему AND…

          Проверьте, пожалуйста, что у вас раскоментирована строка
          echo json_encode($responce);
          И, главное, посмотрите firebug'ом что отвечает сервер.

  • Мопед

    Люди добрые памагите! сделал как в документации http://trirand.com/jqgrid/jqgrid.html Advanced->Search Big Sets но ничего неработает. Немогу сформировать запрос к БД пАмагите. Укажите плз! на возможную ошибку.

    • Понимаете, ответить на вопрос «помогите, ничего не работает» практически не возможно. Я не знаю какая у вас база, какие данные вы хотите получить, какие ошибки возникают.

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

      P.S. Оставлять в комментариях скрипты целиком — не правильно 🙂

      • Мопед

        код полностью с этой страницы
        http://trirand.com/jqgrid/jqgrid.html далее Advanced->Search Big Sets
        таблица есть но у меня проблема с динамическим поиском да и с обычным тоже
        (это копия с указанной выше страницы /который у меня отказывается работать/)
        if(isset($_GET[«nm_mask»]))
        $nm_mask = $_GET['nm_mask'];
        else $nm_mask = «»;
        if(isset($_GET[«cd_mask»]))
        $cd_mask = $_GET['cd_mask'];
        else $cd_mask = «»;
        //construct where clause
        $where = «WHERE 1=1"; // может ошибка здесь? если ставишь вместо 1=1 например item_id=1 то в таблице только эта запись с item_id=1
        тогда что нужно записать?
        if($nm_mask!=») $where.= » AND item LIKE '$nm_mask%'»; if($cd_mask!=») $where.= » AND item_cd LIKE '$cd_mask%'»;

        БД mysql выбор по 1 таблице items в таблице item_id, item, item_cd
        вот cам запрос
        $SQL = «SELECT * FROM items «.$where.» ORDER BY $sidx $sord LIMIT $start , $limit»;

        ОШИБКИ НЕ ВОЗНИКАЮТ скрипт пишет что идет загрузка(отбор данных по условию) а дальше ничего не происходи! я так пологаю что неверна конструкция $where

        Спасибо за быстрый ответ!

        • Конструкция WHERE правильная, т.к. «WHERE 1=1» должно возвращать true, т.е. это тот же запрос, что и без WHERE вообще. Они его использовали чтобы добавлять к нему AND…

          Проверьте, пожалуйста, что у вас раскоментирована строка
          echo json_encode($responce);
          И, главное, посмотрите firebug'ом что отвечает сервер.

  • roottinnik

    При работе с jqGrid использую кодировку windows-1251. При формировании запроса к БД кодировка каким-то образом изменяется и в зарос подставляется параметр в кодировке отличной от windows-1251 (русский текст не читается). Подскажите где примерно искать ошибку? Использую CodeIgnite+БД FireBird+jQuery 1.3.2 + jqGrid 3.5.3.
    Данные отправляю методом POST. Работаю с форматом xml. В Firebug показывает что POST передает в параметре data читаемый русский текст. В «ответе» в параметре where текст не в русской кодировке и не читаем.
    Может что подскажите?

    • Дело в том, что jqGrid передает данные в ajax запросе, т.е. они передаются в utf-8. Попробуйте на стороне сервера изменить кодировку запроса. Например, так

      $par1 = $this->input->post('par1');
      $par1 = mb_convert_encoding($par1,'windows-1251','utf-8');

  • roottinnik

    При работе с jqGrid использую кодировку windows-1251. При формировании запроса к БД кодировка каким-то образом изменяется и в зарос подставляется параметр в кодировке отличной от windows-1251 (русский текст не читается). Подскажите где примерно искать ошибку? Использую CodeIgnite+БД FireBird+jQuery 1.3.2 + jqGrid 3.5.3.
    Данные отправляю методом POST. Работаю с форматом xml. В Firebug показывает что POST передает в параметре data читаемый русский текст. В «ответе» в параметре where текст не в русской кодировке и не читаем.
    Может что подскажите?

    • Дело в том, что jqGrid передает данные в ajax запросе, т.е. они передаются в utf-8. Попробуйте на стороне сервера изменить кодировку запроса. Например, так

      $par1 = $this->input->post('par1');
      $par1 = mb_convert_encoding($par1,'windows-1251','utf-8');

  • Last

    Практически подобрался к поиску. Пока не нашел (наверное плохо искал), нужен пример для «диапазона», т.е. когда значение поля скажем дата или сумма попадает в какой-то диапазон. Ниже пример как оно уже в запрос попадает.
    «(date BETWEEN STR_TO_DATE('».$date1.»','%d.%m.%Y') AND
    STR_TO_DATE('».$date2.»','%d.%m.%Y')) AND (sum BETWEEN «.$sum1.» AND «.$sum2.»)»

    • Запрос вроде правильно составлен. Если пришлёте дамп базы (желательно с какими-нибудь данными) я попробую потестировать.

  • Last

    Практически подобрался к поиску. Пока не нашел (наверное плохо искал), нужен пример для «диапазона», т.е. когда значение поля скажем дата или сумма попадает в какой-то диапазон. Ниже пример как оно уже в запрос попадает.
    «(date BETWEEN STR_TO_DATE('».$date1.»','%d.%m.%Y') AND
    STR_TO_DATE('».$date2.»','%d.%m.%Y')) AND (sum BETWEEN «.$sum1.» AND «.$sum2.»)»

    • Запрос вроде правильно составлен. Если пришлёте дамп базы (желательно с какими-нибудь данными) я попробую потестировать.

  • Last

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

    • Писать PHP скрипт по-моему не обязательно.
      После того, как пользователь откроет форму поиска, вы сможете прочитать значения, введённые в поля, размещённые над гридом.

      Что-то подобное я делал в этом примере.

  • Last

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

    • Писать PHP скрипт по-моему не обязательно.
      После того, как пользователь откроет форму поиска, вы сможете прочитать значения, введённые в поля, размещённые над гридом.

      Что-то подобное я делал в этом примере.

  • superbeller

    Отличная штука jqGrid и статьи ваши полезные очень. Но вот появилась задача простая — сделать кнопку (в виде лупы которая) сделать сверху таблицы. И эта простая с виду задача вызвала затруднения. В итоге появились вопросы:
    1) можно ли эту кнопку сделать сверху, но чтобы по ней всплывал стандартный поиск-фильтр (как у вас в примере). Я нашёл вариант с filterGrid, но он просто добавляет в заголовки поля поиска, а это не очень удобно.
    2) можно ли сделать этот поиск-фильтр не всплывающим, а просто например сверху таблицы. Я пытался в стилях поправить, но этого мало — надо ещё копаться в JavaScript коде, а это сложно, потому что у них там функции c названиями типа F,G,H.
    3) последний вопрос вытекает из первых двух. Если предыдущие вещи нельзя сделать с помощью их настроек, то нет ли у них на такой случай какого-то интерфейса, чтобы можно было вызывать события с помощью каких-то функций. Ну типа «начать сортировку с такими параметрами» и тп. Это сильно помогло бы не завязываться на их дизайн и компановку.
    Спасибо, если сможете ответить.

    • Я этого сделать не пробовал. Но что если просто поменять строки 17 и 18 (в первом листинге) местами.

      По третьему пункту я не понял о каком интерфейсе речь.

      • superbeller

        Строки я менял — не помогло. Там в принципе и по дизайну видно, что он подгоняет под таблицу. Про третий пункт я имел ввиду, чтобы события грида можно было вешать на мою кнопку. Что-то типа trigger('reloadGrid'), только чтобы вылезала их форма поиска (типа trigger('showSearchModal')). Вот как-то так.

  • superbeller

    Отличная штука jqGrid и статьи ваши полезные очень. Но вот появилась задача простая — сделать кнопку (в виде лупы которая) сделать сверху таблицы. И эта простая с виду задача вызвала затруднения. В итоге появились вопросы:
    1) можно ли эту кнопку сделать сверху, но чтобы по ней всплывал стандартный поиск-фильтр (как у вас в примере). Я нашёл вариант с filterGrid, но он просто добавляет в заголовки поля поиска, а это не очень удобно.
    2) можно ли сделать этот поиск-фильтр не всплывающим, а просто например сверху таблицы. Я пытался в стилях поправить, но этого мало — надо ещё копаться в JavaScript коде, а это сложно, потому что у них там функции c названиями типа F,G,H.
    3) последний вопрос вытекает из первых двух. Если предыдущие вещи нельзя сделать с помощью их настроек, то нет ли у них на такой случай какого-то интерфейса, чтобы можно было вызывать события с помощью каких-то функций. Ну типа «начать сортировку с такими параметрами» и тп. Это сильно помогло бы не завязываться на их дизайн и компановку.
    Спасибо, если сможете ответить.

    • Я этого сделать не пробовал. Но что если просто поменять строки 17 и 18 (в первом листинге) местами.

      По третьему пункту я не понял о каком интерфейсе речь.

      • superbeller

        Строки я менял — не помогло. Там в принципе и по дизайну видно, что он подгоняет под таблицу. Про третий пункт я имел ввиду, чтобы события грида можно было вешать на мою кнопку. Что-то типа trigger('reloadGrid'), только чтобы вылезала их форма поиска (типа trigger('showSearchModal')). Вот как-то так.

  • Last

    Нужно курить в сторону toppager, пытаюсь разобраться как им пользоваться, второй вариант toolbar тут в принципе в демке все понятно, добавляем toolbar: [true,»top»] и
    $(«#t_toolbar1»).append(«»);
    $(«input»,»#t_toolbar1").click(function(){
    jQuery(«#search»).jqGrid('searchGrid');}

    • superbeller

      В принципе да, самое подходящее решение с верхним тулбаром. Самое смешное, что я это уже делал)) Только событие вешал на обычную кнопку. Но тогда мне показалось, что оно не использует опции из colModel…в общем тупанул наверно)) А теперь всё отлично работает. Странно конечно, что у их стандартного тулбара нет опций типа где его отображать относительно таблицы (или есть?)

      • superbeller

        Нашёл таки у них в настройках как сделать, чтобы вверху всё было!!! Оказывается у грида есть такая опция: toppager. Её надо выставить как true. Но эта опция копирует только пейджер, а не кнопки с тулбара. А кнопки с тулбара копируются вверх с помощью опции navGrid cloneToTop. Её надо поставить в true. Но этот cloneToTop появился только в версии 3.6.3. Теперь стало намного удобнее. Но всё равно неплохо было бы, чтобы advanced searching был бы инлайн, а не всплывающий. Но это надо ещё вкурить)))

      • Last

        Есть toppager он работает с версии 3.6.3 но я его как бы запустил посмотрел и убрал и бо штатный меня устравивает, а вот о чем я уже писал повесить добавление на ins и удаление на del интереснее, аналогично поиск можно повесить на ctrl+f

  • Last

    Нужно курить в сторону toppager, пытаюсь разобраться как им пользоваться, второй вариант toolbar тут в принципе в демке все понятно, добавляем toolbar: [true,»top»] и
    $(«#t_toolbar1»).append(«»);
    $(«input»,»#t_toolbar1").click(function(){
    jQuery(«#search»).jqGrid('searchGrid');}

    • superbeller

      В принципе да, самое подходящее решение с верхним тулбаром. Самое смешное, что я это уже делал)) Только событие вешал на обычную кнопку. Но тогда мне показалось, что оно не использует опции из colModel…в общем тупанул наверно)) А теперь всё отлично работает. Странно конечно, что у их стандартного тулбара нет опций типа где его отображать относительно таблицы (или есть?)

      • superbeller

        Нашёл таки у них в настройках как сделать, чтобы вверху всё было!!! Оказывается у грида есть такая опция: toppager. Её надо выставить как true. Но эта опция копирует только пейджер, а не кнопки с тулбара. А кнопки с тулбара копируются вверх с помощью опции navGrid cloneToTop. Её надо поставить в true. Но этот cloneToTop появился только в версии 3.6.3. Теперь стало намного удобнее. Но всё равно неплохо было бы, чтобы advanced searching был бы инлайн, а не всплывающий. Но это надо ещё вкурить)))

      • Last

        Есть toppager он работает с версии 3.6.3 но я его как бы запустил посмотрел и убрал и бо штатный меня устравивает, а вот о чем я уже писал повесить добавление на ins и удаление на del интереснее, аналогично поиск можно повесить на ctrl+f

  • Last

    Да тут возникла задачка удалять запись по нажатию del

    $("#"+table+"list").bind("keydown", function(e)
    {
    var idrow = $(this).jqGrid('getGridParam','selrow');
    if ((e.which==46) && (idrow))
    {
    $(this).delGridRow(idrow,{afterSubmit:processAddEdit,closeOnEscape:true,delData:{table:table}});
    }
    return true;
    });

    Но а) не работает в мозиле б)в окошкен удаления не работют клавиши стрелок, что бы фокус сдвинуть на кнопку «удалить», т.е. физически кликать приходится

    • superbeller

      А что это за событие bind ? Вроде в jQuery есть стандартное событие keydown:
      $(window).keydown(function(event){
      switch (event.keyCode) {
      // ...
      // different keys do different things
      // Different browsers provide different codes
      // see here for details: http://unixpapa.com/js/key.html
      // ...
      }
      });

      Там ссылка есть — чем поведение отличается в разных броузерах…

      • bind — универсальный метод для подключения любых событий.
        Т.е. .bind(«click», function() {…}) тоже самое, что и .click(function() {…})

      • Last

        смысл тот же, забедилось $(document).keydown(function(e)... для стрелочек тоже думаю на всплывающее окошко нужно вешать обработчик.

        • Last

          В принципе повесил удаление на del, на стрелки вправо влево, переброс фокуса
          if (e.which==37) {$("#dData").focus();}
          if (e.which==39) {$("#eData").focus();}
          НО! Фокус есть, а подсветки нет. Т.е. не видно какая кнопка выбрана. Пока не придумал как это сделать.

        • А подсветку сделать с помощью CSS нельзя?
          Тогда всё упростилось бы. Вместе с переносом фокуса, можно было бы присвоить кнопке соответствующий класс.

        • Last

          В css не силен, кто бы помог разобратся какой там класс отвечает за цвет выбранной кнопки. Классы я понимаю берутся из ui.

        • Да, классы берутся из jQuery UI. И за оформление кнопки отвечает сразу несколько классов, например, .ui-icon. Удобнее всего выбрать firebug'ом нужную кнопку и смотреть какие стили применяются именно к ней, заодно он вам покажет в каких файлах они опеределены.

  • Last

    Да тут возникла задачка удалять запись по нажатию del

    $("#"+table+"list").bind("keydown", function(e)
    {
    var idrow = $(this).jqGrid('getGridParam','selrow');
    if ((e.which==46) && (idrow))
    {
    $(this).delGridRow(idrow,{afterSubmit:processAddEdit,closeOnEscape:true,delData:{table:table}});
    }
    return true;
    });

    Но а) не работает в мозиле б)в окошкен удаления не работют клавиши стрелок, что бы фокус сдвинуть на кнопку «удалить», т.е. физически кликать приходится

    • superbeller

      А что это за событие bind ? Вроде в jQuery есть стандартное событие keydown:
      $(window).keydown(function(event){
      switch (event.keyCode) {
      // ...
      // different keys do different things
      // Different browsers provide different codes
      // see here for details: http://unixpapa.com/js/key.html
      // ...
      }
      });

      Там ссылка есть — чем поведение отличается в разных броузерах…

      • bind — универсальный метод для подключения любых событий.
        Т.е. .bind(«click», function() {…}) тоже самое, что и .click(function() {…})

      • Last

        смысл тот же, забедилось $(document).keydown(function(e)... для стрелочек тоже думаю на всплывающее окошко нужно вешать обработчик.

        • Last

          В принципе повесил удаление на del, на стрелки вправо влево, переброс фокуса
          if (e.which==37) {$("#dData").focus();}
          if (e.which==39) {$("#eData").focus();}
          НО! Фокус есть, а подсветки нет. Т.е. не видно какая кнопка выбрана. Пока не придумал как это сделать.

        • А подсветку сделать с помощью CSS нельзя?
          Тогда всё упростилось бы. Вместе с переносом фокуса, можно было бы присвоить кнопке соответствующий класс.

        • Last

          В css не силен, кто бы помог разобратся какой там класс отвечает за цвет выбранной кнопки. Классы я понимаю берутся из ui.

        • Да, классы берутся из jQuery UI. И за оформление кнопки отвечает сразу несколько классов, например, .ui-icon. Удобнее всего выбрать firebug'ом нужную кнопку и смотреть какие стили применяются именно к ней, заодно он вам покажет в каких файлах они опеределены.

  • George

    Здравствуйте уважаемый Владимир!
    У меня вопрос …. когда я скачал исходники…я настроил как вы говорили…НО у меня не работает ПОИСК…прочитал ваше обсуждение и всё равно не помогло….в чём дело помогите!
    С Уважением George!

    • Чтобы ответить на этот вопрос мне нужны скриншоты firebug'а с запросом серверу (при поиске) и ответом от него (если ответ вообще пришел). Т.е. нужны скриншоты консоли с вкладками «Post» и «Ответ».

  • George

    Здравствуйте уважаемый Владимир!
    У меня вопрос …. когда я скачал исходники…я настроил как вы говорили…НО у меня не работает ПОИСК…прочитал ваше обсуждение и всё равно не помогло….в чём дело помогите!
    С Уважением George!

    • Чтобы ответить на этот вопрос мне нужны скриншоты firebug'а с запросом серверу (при поиске) и ответом от него (если ответ вообще пришел). Т.е. нужны скриншоты консоли с вкладками «Post» и «Ответ».

  • Александр

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

    • Обещать не буду, но пожелание учту.

    • Секундочку, ведь в примере к этой статье работают и поиск, и редактирование, и сортировка. Что именно вы хотите собрать вместе?

  • Александр

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

    • Обещать не буду, но пожелание учту.

    • Секундочку, ведь в примере к этой статье работают и поиск, и редактирование, и сортировка. Что именно вы хотите собрать вместе?

  • Last

    Вопрос. Как autocomplete привязать. Проблема я понял в том что поля к которому привязываем еще нет и jquery дает ошибку this[0].ownerDocument is null
    А потом когда форма для добавления данных выскакивает, оно уже не работает т.к. была ошибка или нужно поместить этот кусок кода в функцию, которая вызовется после появления формы.

  • Last

    Вопрос. Как autocomplete привязать. Проблема я понял в том что поля к которому привязываем еще нет и jquery дает ошибку this[0].ownerDocument is null
    А потом когда форма для добавления данных выскакивает, оно уже не работает т.к. была ошибка или нужно поместить этот кусок кода в функцию, которая вызовется после появления формы.

  • Last

    Впрочем нашел, в editoptionsах нужно что-нибудь типа такого

    dataInit: function (elem) {

    $(elem).autocomplete({
    serviceUrl: 'name.php',
    minChars: 2,
    maxHeight: 400,
    width: 170,
    zIndex: 2000,
    params: { table: table},
    deferRequestBy: 300,
    });

    }

    Ну и про стили не забыть

    • Спасибо, что поделились решением! Может быть кому-то пригодится.

  • Last

    Впрочем нашел, в editoptionsах нужно что-нибудь типа такого

    dataInit: function (elem) {

    $(elem).autocomplete({
    serviceUrl: 'name.php',
    minChars: 2,
    maxHeight: 400,
    width: 170,
    zIndex: 2000,
    params: { table: table},
    deferRequestBy: 300,
    });

    }

    Ну и про стили не забыть

    • Спасибо, что поделились решением! Может быть кому-то пригодится.

  • Антон

    Добрый день!
    Мне нужно сделать поиск по дате. Подскажите пожалуйста как вставить в поле ввода даты календарик.
    Спасибо

    • Для этого можно использовать свойство editoptions для colModel.

      Подключение календаря будет выглядеть примерно так

      editoptions:{dataInit: function (elem) {$(elem).datepicker({dateFormat:"dd/mm/yy"});} } }

  • Антон

    Добрый день!
    Мне нужно сделать поиск по дате. Подскажите пожалуйста как вставить в поле ввода даты календарик.
    Спасибо

    • Для этого можно использовать свойство editoptions для colModel.

      Подключение календаря будет выглядеть примерно так

      editoptions:{dataInit: function (elem) {$(elem).datepicker({dateFormat:"dd/mm/yy"});} } }

  • Владимир

    Как можно динамически изменить свойства navGrid? Открыть доступ к редактированию или добавлению или закрыть? Например по нажатию на кнопку.

    • Попробуйте по нажатию на кнопку вызвать метод navGrid с другими параметрами.

      • Владимир

        Вызываю, но при этом к существующим кнопкам navGrid добавляются новые справа и так до бесконечности. Т.Е. кнопки клонируются, а старые не удаляются

        • Попробуйте удалить pager, затем создать пустой и вызвать для него navGrid.
          $('#pager').detach();
          $('<div id=»pager»></div>').insertAfter($('#table'));
          $('#pager').navGrid(…..

  • Владимир

    Как можно динамически изменить свойства navGrid? Открыть доступ к редактированию или добавлению или закрыть? Например по нажатию на кнопку.

    • Попробуйте по нажатию на кнопку вызвать метод navGrid с другими параметрами.

      • Владимир

        Вызываю, но при этом к существующим кнопкам navGrid добавляются новые справа и так до бесконечности. Т.Е. кнопки клонируются, а старые не удаляются

        • Попробуйте удалить pager, затем создать пустой и вызвать для него navGrid.
          $('#pager').detach();
          $('<div id=»pager»></div>').insertAfter($('#table'));
          $('#pager').navGrid(…..

  • Last

    Хм. Похоже токо работать напрямую с потомками #ваш_пейджер. Т.е. посмотреть как оно там устроено (там таблица типа

    )
    ну и соответственно можно убавлять добавлять все что хочешь через jquery

  • Last

    Хм. Похоже токо работать напрямую с потомками #ваш_пейджер. Т.е. посмотреть как оно там устроено (там таблица типа

    )
    ну и соответственно можно убавлять добавлять все что хочешь через jquery

  • Sh0dan

    Здравствуйте, Владимир. Видел, что Вы дружите с yii, так что хотел задать вопрос о связке yii + jqgrid. Итак с интеграцией грида в фреймворк все прекрасно, но вот хочу добавить функцию поиска и ни как не получается. В общем, вот мой файл представления http://pastebin.com/6eBADnEg. И что в итоге получил: http://clip2net.com/clip/m45787/1274816860-clip
    Обратите внимание на пустой навбар. Почему так? И еще вопрос по поводу сортировки столбцов. Не могли бы Вы подробней расскащать как эту фичу использовать в связке yii + jqgrid? Заранее благодарен.

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

    В вашем случае нужно смотреть firebug'ом ошибки js и разметку навбара. Кроме того, вкладку Net, возможно какие-то файлы не загрузились. В коде я ошибки не вижу. Вообще я бы вынес js код инициализации jqGrid в отдельный файл и подключал его с помощью registerScriptFile.

    А для сортировки нужно написать отдельный метод контроллера
    и обработать в нем параметры сортировки. О параметрах можно почитать либо в документации, либо посмотреть их firebug'ом.
    Когда появится время, постараюсь сделать такой пример.

  • Sh0dan

    Спасибо за ответ, Владимир. Уже разобрался с поиском и сортировкой. Код действительно, правильный. Здесь сыграл человеческий фактор — во время скачивания плагина с сайта выбрал не все компоненты). Для сортировки использовал CSort. Надо было больше времени уделить изучению механизмов работы, а не паниковать здесь))

  • BuCeFaL

    Спасибо за статью, отлично написана.
    Такой вопрос:
    Если мне нужно создать (добавить) фильтрацию по 1 полю (текстовое поле с датой)
    как такое можно реализовать ?
    насколько я понимаю, добавить input и событие на ввод в поле.
    При событии новый аякс запрос с параметром фильтра.

  • Самое главное, на стороне сервера написать скрипт, который отфильтрует данные.
    А на клиенте можно сделать как угодно. Создать форму поиска с несколькими полями (как показано в этой статье) или сделать отдельные поля с ajax обработчиком — как вам удобнее.

  • Спасибо, проблема решена. На сайте с примерами есть уже такое решение.
    http://trirand.com/blog/jqgrid/jqgrid.html
    Advanced -> Search Big Sets
    по такому же принципу + датапикер

  • Sysleem

    Доброго времени суток!
    Статья очень интересная, воспользовался некоторыми приемами в том числе и поиском, НО!! поиск отказывется работать — не могу понять в чем дело. Может быть что нибудь посоветуете:
    Post:
    Параметрыapplication/x-www-form-urlencoded
    _search true
    filters {«groupOp»:»AND»,»rules»:[{«field»:»nom_doc»,»op»:»eq»,»data»:»888"}]}
    nd 1282019242274
    page 1
    rows 10
    sidx dispoln_doc
    sord asc
    Исходный код
    _search=true&nd=1282019242274&rows=10&page=1&sidx=dispoln_doc&sord=asc&filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22nom_doc%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22888%22%7D%5D%7D

    Ответ:
    <!—error—>

    Warning: Invalid argument supplied for foreach() in P:hometabl.ruwwwicgetd_ms.php on line 53

    <script language=JavaScript src='/denwer/errors/phperror_js.php'></script><!—error—>

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in P:hometabl.ruwwwicgetd_ms.php on line 93

    <script language=JavaScript src='/denwer/errors/phperror_js.php'></script><!—error—>

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in P:hometabl.ruwwwicgetd_ms.php on line 109

    <script language=JavaScript src='/denwer/errors/phperror_js.php'></script>{«page»:»1",»total»:0,»records»:null}
    C уважением Mike.

  • Очень похоже, что ошибка возникла при получении данных из БД.
    Посмотрите, что записано в переменную, которую вы используете в цикле.

  • вообще ничего не происходит от нажатия на лупу 🙁
    предыдущие примеры с полпинка
    думал мож в кодировках дело — завёл ENG ФИО — нифига

  • Только что проверил, в примере при нажатии на лупу открывается форма поиска. Каким браузером вы пользуетесь?

  • IzumeRoot

    Не удовлетворили как-то штатные способы поиска. Пришлось написать свой компанент. Какие белые пятна он закрывает и как его использовать читаем тут http://web-linux.ru/?p=895

  • IzumeRoot

    Разочаровали встроеные инструменты фильтрации в jqGrid. Пришлось написать свой. Подробнее тут http://web-linux.ru/?p=895

    • IzumeRoot

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

  • Evgeny

    Вот такие ошибки при поиске из вашего примера…

    Warning: Invalid argument supplied for foreach() in Z:hometest.comwwwsearchgetdata.php on line 34

    Fatal error: Call to a member function fetch() on a non-object in Z:hometest.comwwwsearchgetdata.php on line 68

    Ранее спрашивали, но всё же — как исправить?
    И как посмотреть содержимое переменных php скрипта, которому данные передаются через POST?

    • Evgeny

      json_decode не работал — строка не нравилась ему из-за дополнительных слэшей.
      Исправил так:

      $json2 =$_POST['filters'];
      $json2 = str_replace(«\», », $json2);

      $searchData = json_decode($json2);

      И пришлось убрать везде $dbh->quote.

      Правильно ли поступил?

      • В предыдущем комментарии я этот вариант не учел.

        У вас случайно magic quotes не включены? Желательно их отключить.

        И можно использовать stripslashes вместо str_replace.

    • Такая ошибка может возникать в двух случаях:

      1) не отправляются $_POST['filters'] или отправляются в неправильном формате. В любом случае с помощью firebug посмотрите какие данные отправились в POST запросе;

      2) не поддерживается функция json_decode — включите ее поддержку в php.ini.
      Посмотреть содержимое переменных можно с помощью отладчика (xdebug), либо просто вывести их с помощью var_dump, либо записать в лог и т.д.

  • Dimon

    как можно вызвать это диалоговое окно поиска
    по нажатию не на лyпy в нижнем углу а например на свою кнопку поиска?
    не все могут понять что это поиск 😉
    Спасибо

    • Создаете кнопку, которая будет открывать поиск и назначаете ей обработчик события click.
      Код будет выглядеть примерно так:
      $(«#showSearchBtn»).click(function() {
          jQuery(«#list»).jqGrid('searchGrid',
      {sopt:['eq','ne','bw','cn']}
      );
      });

      • Dimon

        Владимир, все работает огромное спасибо 😉

  • Парни, подскажите, пожалуйста, по сортировке в jqGrid — есть столбец «Num» (например), как данные отсортировать так, чтобы сначала шли строки со значением 1,2,3,…20..50, а потом строки с пустым значением NUM. Сейчас, просто напросто, если установить сортировку в ASC сначала идут записи с пустыми ячейками, а потом только с номера от 1 и далее. Спасибо заранее.

  • Igoresz

    Очень «рулезно»! PDO напрягло, но фиг с ним… 

    • Igoresz

      Вот еще момент… почему только 7 строк попадают в видимую область? Как сменить?

      • Igoresz

        вдруг кому-надо 🙂
        //        autoheight: true,
        //        height: 'auto',
                height: 550,
                    pager: jQuery('#pager'),

        • Правильно, задавать высоту нужно в пикселях, так чтобы таблица вписывалась в дизайн странице. Если попробуете задавать количество видимых строк (это, в принципе, возможно), то придется учитывать высоту строки.

  • MazdaY

    А как заставить искать по полю TIMESTAMP в режиме больше меньше?

    • В настройки searchoptions нужно добавить 'gt' и 'lt'
      searchoptions:{sopt:['eq','ne','bw','cn', 'gt', 'lt']}
      А в PHP скрипт в районе 55-ой строки добавить: case 'lt': $qWhere .= $rule->field.' quote($rule->data); break;

      case 'gt': $qWhere .= $rule->field.' > '.$dbh->quote($rule->data); break;

  • opus44

    Не работает поиск. Похоже на какую то систематическую ошибку. Проверил настройки хостинга:
    magic_quotes_gpc — off
    magic_quotes_runtime — off
    magic_quotes_sybase — off

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

    • opus44

      Кажется нашел причину. При установке multipleSearch:false перестает работать поиск. Возвращаю multipleSearch:true — и все замечательно начинает работать. Подскажите как пофиксить эту проблему

      • А зачем вам отключать multipleSearch? Ведь этот параметр активирует режим расширенного поиска.

        • opus44

          может я не совсем понял назначение этой опции? мне нужно оставить на форме поиска только одну строку, без возможности добавления еще условий поиска. Даже если это будет поиск только по одному полю. Как это можно реализовать?

        • У меня есть похожий пример. В нем поле поиска размещается рядом с таблицей.

  • Иван

    добрый день! спасибо вам за поддержку ) подскажите пожалуйста когда нет данных, то страница «зависает» пишет загрузка. Можно как сто сделать чтобы сам grid работал? просто писал например «нет данных» однако при этом мог добавить новые, без перезагрузки страницы?

    • А что возвращает сервер если данных нет? Попробуйте вернуть пустой массив в json формате.

      • Иван

        page
        «3»
        total
        31
        records
        «752»
        TypeError: a is undefined
        [Прерывать на этой ошибке]
        …d*)(?:n([+-]?d*))?/.exec(a[2]===»even»&&»2n»||a[2]===»odd»&&»2n+1"||!/D/.test…
        Вывод firebug firefox.
        нашел в нете примеры, у меня сейчас вот так, но почему-то не работает :

        jQuery(document).ready(function(){
        var lastSel;
        var emptyMsgDiv = $('no data');
        jQuery(«#list»).jqGrid({
        loadComplete: function(data){
        {
        if ($('list').getGridParam('records') == 0) // are there any records?
        { jQuery(«#list»).hide();
        emptyMsgDiv.show(); }
        else
        { jQuery(«#list»).show();
        emptyMsgDiv.hide();}
        }

        $.each(data.rows,function(i){
        if(data.rows[i].cell['11']==1){
        $(«#» + data.rows[i].id).css(«background», «darksalmon»);
        }
        if(data.rows[i].cell['11']==2){
        $(«#» + data.rows[i].id).css(«background», «peachpuff»);
        }

        }
        );

        {
        }

        },

        • А какой элемент вы хотите найти с помощью $('no data') ?

  • Guest

    У меня возник вопрос не в тему, но спрошу))

    У меня есть таблица в которой всё нормально работает(редактирование, удаления, добавления полей), но надо еще создать возможность объединение нескольких строк (хотя бы двух: это можно быль бы сделать переименовав одну и удалив другую), но вот в чем сложность: например в строках «счета» основной таблицы, как в subgrid, еще есть содержимая таблица со списком товаров.

    Как же сделать чтоб все данные сохранились и переместились в новый счет???

    Как например, если смотреть здесь: http://www.trirand.com/blog/jqgrid/jqgrid.html# (Advanced-Subgrid), объединить 12 и 13 поля и при этом сохрани всё данные что есть внутри в новом поле или в одном из них, потом его переименовав?? Возможно Subgrid не решение, я сама пока не знаю как это сделать, но возможно есть и другие варианты, которые я, как новичок, могу не знать, подскажите пожайлуста?

  • MaryAnn

    Добрый день, у меня возможно не по теме, но есть вопрос по поводу обьеденения строк, которые как например в Subgrid(http://www.trirand.com/blog/jqgrid/jqgrid.html# (Advanced- Subgrid)), имеют внутри еще одну таблицу с некими данными, и как при этом эти данные сохранить(то ли в новом поле то ли в одном из них переименовав его)? Возможно существуют в Jqgrid для этого и другие инструменты, подскажите пожайлуста как это можно сделать?

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

      Можно сделать так:

      1) пользователь выделяет нужные строки;
      2) нажимает на кнопку «объединить» (ее можно разместить под или над таблицей) в результате на сервер уходит ajax запрос с id соответствующих строк;
      3) серверный скрипт объединяет данные, сохраняет их в базу и отправляет обновленную таблицу;
      4) данные перезагружаются в jqgrid.

  • MaryAnn

    У меня вопрос по поиску, вот используя код в данном вамы премере, у меня поиск не работает, идет ошыбка «Warning: Invalid argument supplied for foreach() in Z:hometest1.ruwwwadmin_getdata.php on line 47
    Couldnt execute query.You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near » at line 1"
    ето потому что я использую не PDO, тогда как корректно написать в моем случае?
    НО когда я меняю код на:
    $ops = array(
    'eq'=>'=', //equal
    'ne'=>»,//not equal
    'bw'=>'LIKE', //begins with
    'cn'=>'LIKE', // contains
    );
    function getWhereClause($col, $oper, $val){
    global $ops;
    if($oper == 'bw' || $oper == 'bn') $val .= '%';
    if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
    if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
    return » WHERE «.$col.» {$ops[$oper]} «.$val.» «;
    }
    $where = «»; //if there is no search request sent by jqgrid, $where should be empty
    $searchField = isset($_POST['searchField']) ? $_POST['searchField'] : false;
    $searchOper = isset($_POST['searchOper']) ? $_POST['searchOper']: false;
    $searchString = isset($_POST['searchString']) ? $_POST['searchString'] : false;
    if ($_POST['_search'] == 'true') {
    $where = getWhereClause($searchField,$searchOper,$searchString);
    }
    по id ищет, зато по буквам нет, хотя и задала кодировку utf-8, что это значит? как исправить?

    • 1) Invalid argument supplied for foreach …
      Означает, вы пытаетесь использовать foreach для переменной, которая не содержит массив. Прежде всего, проверьте какое именно значение сохранено в переменной.

      2) You have an error in your SQL syntax …
      Здесь не играет роли, используете вы PDO или нет. Такая ошибка появляется когда PDO или другая библиотека сформировали запрос и пытаются его выполнить. Ошибка в синтактисе запроса. Проверьте значение $where.

      3) Couldnt execute query.Unknown column 'МТФ' …
      Названия полей таблицы в любом случае должны быть записаны латинскими буквами. Сделайте var_export(…) запроса, который вы пытаетесь выполнить.

      • MaryAnn

        Название полей у меня записаны латинскими буквами, var_export(…) запроса не могу сделать, при попытке его сделать сразу же таблица отключается, уже везде перепроверила кодировку, везде utf-8, и в php-файле, и в getdata.php («SET NAMES 'utf8';»), и в index.php (charset=utf-8" />), что еще не учла? Где же ошыбка?

        • Выложите ваш getdata.php на каком-нибудь сервисе вроде http://pastebin.com/ чтобы можно было с подсветкой посмотреть код.

  • Александр General

    Владимир подскажите. Вот например есть поиск, мы дали ему задание что искать, он выбрал строки, может ли поисковая форма просигнализировать сколько строк найдено? Чтобы в ручную не считать.
    Еще вопрос:
    с подтаблицами. Я выбираю строку кликнув на которую разворачивается подтаблица к этой строке (через subgrid)? можно сделать так чтобы разворачивались две подтаблицы (разные выборки) к одной строке и стояли рядом (не под друг другом)?

    • 1) Да, это выполняется автоматически. По-умолчанию, в статус баре отображается что-то вроде «View 1 — 10 of 27», где 27 — общее количество строк.

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

      • Александр General

        Насчет второй подтаблицы сам нашел:
        просто скопировал код по созданию первой подтаблицы и заменил
        $(«#»+subgrid_id).html(
        на
        $(«#»+subgrid_id).append(
        ну и назначив другие php обработчики
        Спасибо.