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

1 сентября, 2009
jqgrid

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

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

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

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

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

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

Напомню, что 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

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

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

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

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

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

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

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

]]>

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

]]>

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

]]>
  • вообще ничего не происходит от нажатия на лупу :(
    предыдущие примеры с полпинка
    думал мож в кодировках дело - завёл ENG ФИО - нифига
  • 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

    Ответ:


    Warning: Invalid argument supplied for foreach() in P:\home\tabl.ru\www\ic\getd_ms.php on line 53

    <script language="JavaScript" src="/denwer/errors/phperror_js.php"></script>

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in P:\home\tabl.ru\www\ic\getd_ms.php on line 93

    <script language="JavaScript" src="/denwer/errors/phperror_js.php"></script>

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in P:\home\tabl.ru\www\ic\getd_ms.php on line 109

    <script language="JavaScript" src="/denwer/errors/phperror_js.php"></script>{"page":"1","total":0,"records":null}
    C уважением Mike.
  • Очень похоже, что ошибка возникла при получении данных из БД.
    Посмотрите, что записано в переменную, которую вы используете в цикле.
  • BuCeFaL
    Спасибо за статью, отлично написана.
    Такой вопрос:
    Если мне нужно создать (добавить) фильтрацию по 1 полю (текстовое поле с датой)
    как такое можно реализовать ?
    насколько я понимаю, добавить input и событие на ввод в поле.
    При событии новый аякс запрос с параметром фильтра.
  • BuCeFaL
    Спасибо, проблема решена. На сайте с примерами есть уже такое решение.
    http://trirand.com/blog/jqgrid/jqgrid.html
    Advanced -> Search Big Sets
    по такому же принципу + датапикер
  • Самое главное, на стороне сервера написать скрипт, который отфильтрует данные.
    А на клиенте можно сделать как угодно. Создать форму поиска с несколькими полями (как показано в этой статье) или сделать отдельные поля с ajax обработчиком - как вам удобнее.
  • Sh0dan
    Здравствуйте, Владимир. Видел, что Вы дружите с yii, так что хотел задать вопрос о связке yii + jqgrid. Итак с интеграцией грида в фреймворк все прекрасно, но вот хочу добавить функцию поиска и ни как не получается. В общем, вот мой файл представления http://pastebin.com/6eBADnEg. И что в итоге получил: http://clip2net.com/clip/m45787/1274816860-clip-11kb.png
    Обратите внимание на пустой навбар. Почему так? И еще вопрос по поводу сортировки столбцов. Не могли бы Вы подробней расскащать как эту фичу использовать в связке yii + jqgrid? Заранее благодарен.
  • Вообще, использование jqGrid с yii не требует каких-то дополнительных действий. Можно использовать тот же самый код, что и в этом примере, но запросы отправлять не к отдельным скриптам, а методам контроллера.

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

    А для сортировки нужно написать отдельный метод контроллера
    и обработать в нем параметры сортировки. О параметрах можно почитать либо в документации, либо посмотреть их firebug'ом.
    Когда появится время, постараюсь сделать такой пример.
  • Sh0dan
    Спасибо за ответ, Владимир. Уже разобрался с поиском и сортировкой. Код действительно, правильный. Здесь сыграл человеческий фактор - во время скачивания плагина с сайта выбрал не все компоненты). Для сортировки использовал CSort. Надо было больше времени уделить изучению механизмов работы, а не паниковать здесь))
  • Last
    Хм. Похоже токо работать напрямую с потомками #ваш_пейджер. Т.е. посмотреть как оно там устроено (там таблица типа


    )
    ну и соответственно можно убавлять добавлять все что хочешь через jquery
  • Владимир
    Как можно динамически изменить свойства navGrid? Открыть доступ к редактированию или добавлению или закрыть? Например по нажатию на кнопку.
  • Попробуйте по нажатию на кнопку вызвать метод navGrid с другими параметрами.
  • Владимир
    Вызываю, но при этом к существующим кнопкам navGrid добавляются новые справа и так до бесконечности. Т.Е. кнопки клонируются, а старые не удаляются
  • Попробуйте удалить pager, затем создать пустой и вызвать для него navGrid.
    $('#pager').detach();
    $('<div id="pager"></div>').insertAfter($('#table'));
    $('#pager').navGrid(.....
  • Антон
    Добрый день!
    Мне нужно сделать поиск по дате. Подскажите пожалуйста как вставить в поле ввода даты календарик.
    Спасибо
  • Для этого можно использовать свойство editoptions для colModel.

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

    editoptions:{dataInit: function (elem) {$(elem).datepicker({dateFormat:"dd/mm/yy"});} } }
  • Last
    Впрочем нашел, в editoptionsах нужно что-нибудь типа такого

    dataInit: function (elem) {

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

    }

    Ну и про стили не забыть
  • Спасибо, что поделились решением! Может быть кому-то пригодится.
  • Last
    Вопрос. Как autocomplete привязать. Проблема я понял в том что поля к которому привязываем еще нет и jquery дает ошибку this[0].ownerDocument is null
    А потом когда форма для добавления данных выскакивает, оно уже не работает т.к. была ошибка или нужно поместить этот кусок кода в функцию, которая вызовется после появления формы.
  • Александр
    напишите пожалуйста как совместить редактирование, сортировку и поиск таблицы. никак не получается собрать их вместе.
  • Секундочку, ведь в примере к этой статье работают и поиск, и редактирование, и сортировка. Что именно вы хотите собрать вместе?
  • Обещать не буду, но пожелание учту.
  • George
    Здравствуйте уважаемый Владимир!
    У меня вопрос .... когда я скачал исходники...я настроил как вы говорили...НО у меня не работает ПОИСК...прочитал ваше обсуждение и всё равно не помогло....в чём дело помогите!
    С Уважением George!
  • Чтобы ответить на этот вопрос мне нужны скриншоты firebug'а с запросом серверу (при поиске) и ответом от него (если ответ вообще пришел). Т.е. нужны скриншоты консоли с вкладками "Post" и "Ответ".
  • 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
    // ...
    }
    });
    Там ссылка есть - чем поведение отличается в разных броузерах...
  • Last
    смысл тот же, забедилось $(document).keydown(function(e)... для стрелочек тоже думаю на всплывающее окошко нужно вешать обработчик.
  • Да, классы берутся из jQuery UI. И за оформление кнопки отвечает сразу несколько классов, например, .ui-icon. Удобнее всего выбрать firebug'ом нужную кнопку и смотреть какие стили применяются именно к ней, заодно он вам покажет в каких файлах они опеределены.
  • Last
    В css не силен, кто бы помог разобратся какой там класс отвечает за цвет выбранной кнопки. Классы я понимаю берутся из ui.
  • А подсветку сделать с помощью CSS нельзя?
    Тогда всё упростилось бы. Вместе с переносом фокуса, можно было бы присвоить кнопке соответствующий класс.
  • Last
    В принципе повесил удаление на del, на стрелки вправо влево, переброс фокуса
    if (e.which==37) {$("#dData").focus();}
    if (e.which==39) {$("#eData").focus();}
    НО! Фокус есть, а подсветки нет. Т.е. не видно какая кнопка выбрана. Пока не придумал как это сделать.
  • bind - универсальный метод для подключения любых событий.
    Т.е. .bind("click", function() {...}) тоже самое, что и .click(function() {...})
  • Last
    Нужно курить в сторону toppager, пытаюсь разобраться как им пользоваться, второй вариант toolbar тут в принципе в демке все понятно, добавляем toolbar: [true,"top"] и
    $("#t_toolbar1").append("");
    $("input","#t_toolbar1").click(function(){
    jQuery("#search").jqGrid('searchGrid');}
  • superbeller
    В принципе да, самое подходящее решение с верхним тулбаром. Самое смешное, что я это уже делал)) Только событие вешал на обычную кнопку. Но тогда мне показалось, что оно не использует опции из colModel...в общем тупанул наверно)) А теперь всё отлично работает. Странно конечно, что у их стандартного тулбара нет опций типа где его отображать относительно таблицы (или есть?)
  • Last
    Есть toppager он работает с версии 3.6.3 но я его как бы запустил посмотрел и убрал и бо штатный меня устравивает, а вот о чем я уже писал повесить добавление на ins и удаление на del интереснее, аналогично поиск можно повесить на ctrl+f
  • superbeller
    Нашёл таки у них в настройках как сделать, чтобы вверху всё было!!! Оказывается у грида есть такая опция: toppager. Её надо выставить как true. Но эта опция копирует только пейджер, а не кнопки с тулбара. А кнопки с тулбара копируются вверх с помощью опции navGrid cloneToTop. Её надо поставить в true. Но этот cloneToTop появился только в версии 3.6.3. Теперь стало намного удобнее. Но всё равно неплохо было бы, чтобы advanced searching был бы инлайн, а не всплывающий. Но это надо ещё вкурить)))
  • superbeller
    Отличная штука jqGrid и статьи ваши полезные очень. Но вот появилась задача простая - сделать кнопку (в виде лупы которая) сделать сверху таблицы. И эта простая с виду задача вызвала затруднения. В итоге появились вопросы:
    1) можно ли эту кнопку сделать сверху, но чтобы по ней всплывал стандартный поиск-фильтр (как у вас в примере). Я нашёл вариант с filterGrid, но он просто добавляет в заголовки поля поиска, а это не очень удобно.
    2) можно ли сделать этот поиск-фильтр не всплывающим, а просто например сверху таблицы. Я пытался в стилях поправить, но этого мало - надо ещё копаться в JavaScript коде, а это сложно, потому что у них там функции c названиями типа F,G,H.
    3) последний вопрос вытекает из первых двух. Если предыдущие вещи нельзя сделать с помощью их настроек, то нет ли у них на такой случай какого-то интерфейса, чтобы можно было вызывать события с помощью каких-то функций. Ну типа "начать сортировку с такими параметрами" и тп. Это сильно помогло бы не завязываться на их дизайн и компановку.
    Спасибо, если сможете ответить.
  • Я этого сделать не пробовал. Но что если просто поменять строки 17 и 18 (в первом листинге) местами.

    По третьему пункту я не понял о каком интерфейсе речь.
  • superbeller
    Строки я менял - не помогло. Там в принципе и по дизайну видно, что он подгоняет под таблицу. Про третий пункт я имел ввиду, чтобы события грида можно было вешать на мою кнопку. Что-то типа trigger('reloadGrid'), только чтобы вылезала их форма поиска (типа trigger('showSearchModal')). Вот как-то так.
  • Last
    Нет, запрос работает, все ок. Думаю как красиво форму для поиска прицепить. Т.е. скажем поля, по которым нужно задавать диапазон прийдется вынести отдельной строкой скажем над гридом, а остальные оставить в штатном поиске, когда фильтр прямо сверху столбца приделан. Но вот как это сделать, т.к. если поставим search=false, что бы поле фильтра над столбцом не светился по которому диапазон задаем, то как заставить брать значение из инпутов которые над гридом находится будут. Правда есть еще вариант написать пхп-скрипт, и при изменении инпутов сохранять их в переменных сессиии, а потом обращаться уже напрямую в скрипте, который готовит данные для грида.
  • Писать PHP скрипт по-моему не обязательно.
    После того, как пользователь откроет форму поиска, вы сможете прочитать значения, введённые в поля, размещённые над гридом.

    Что-то подобное я делал в этом примере.
  • Last
    Практически подобрался к поиску. Пока не нашел (наверное плохо искал), нужен пример для "диапазона", т.е. когда значение поля скажем дата или сумма попадает в какой-то диапазон. Ниже пример как оно уже в запрос попадает.
    "(date BETWEEN STR_TO_DATE('".$date1."','%d.%m.%Y') AND
    STR_TO_DATE('".$date2."','%d.%m.%Y')) AND (sum BETWEEN ".$sum1." AND ".$sum2.")"
  • Запрос вроде правильно составлен. Если пришлёте дамп базы (желательно с какими-нибудь данными) я попробую потестировать.
  • 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');
  • Мопед
    Люди добрые памагите! сделал как в документации 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'ом что отвечает сервер.
  • Егор
    столкнулся с проблемой фильтрации/поиска при помощи своих контролов. Для "задумчивых" пользователей форма поиска очень сложна и мне необходимо добавить возможность фильтрации при помощи отдельно стоящего селекта и кнопки (условно).
    Можно конечно писать параметры в GET но это в моём случае не есть хорошо.

    Можно ли самому как-то менять значения _search и filters?
blog comments powered by Disqus ]]>