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).
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>jqGrid поиск</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <meta http-equiv="Content-Style-Type" content="text/css" />
- <meta name="description" content="jqGrid поиск" />
- <meta name="keywords" content="jqGrid, javascript, jquery" />
- <link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.7.2.custom.css" />
- <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
- </head>
- <body>
- <table id="list"></table>
- <div id="pager"></div>
- <p>Для поиска нажмите кнопку с изображением лупы (в левом нижнем углу)</p>
- <p>Вы можете добавлять и удалять условия поиска с помощью кнопок "плюс" и "минус", которые расположены справа от условия.</p>
- <p>Esc - закрывает форму поиска</p>
- <p>Описание этого примера вы найдете в статье: <a href="http://www.simplecoding.org/jqgrid-poisk-dannyx.html">jqGrid - поиск данных</a>.</p>
- <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="js/i18n/grid.locale-ru.js"></script>
- <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
- <script type="text/javascript">
- jQuery(document).ready(function(){
- var lastSel;
- jQuery("#list").jqGrid({
- url:'getdata.php',
- datatype: 'json',
- mtype: 'POST',
- colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
- colModel :[
- {name:'id', index:'id', width:50, align:'right', search:false}
- ,{name:'surname', index:'surname', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
- ,{name:'fname', index:'fname', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
- ,{name:'lname', index:'lname', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
- ],
- pager: jQuery('#pager'),
- rowNum:5,
- rowList:[5,10,30],
- sortname: 'id',
- sortorder: "asc",
- viewrecords: true,
- caption: 'Данные пользователей',
- ondblClickRow: function(id) {
- if (id && id != lastSel) {
- jQuery("#list").restoreRow(lastSel);
- jQuery("#list").editRow(id, true);
- lastSel = id;
- }
- },
- editurl: 'saverow.php'
- }).navGrid('#pager',{view:false, del:false, add:false, edit:false},
- {}, // default settings for edit
- {}, // default settings for add
- {}, // delete instead that del:false we need this
- {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
- {} /* view parameters*/
- );
- });
- </script>
- </body>
- </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 – окно поиска закроется после завершения поиска.
Естественно, это далеко не полный список параметров.
На данном этапе мы включили и настроили поиск на стороне клиента. И наша таблица должна выглядеть примерно так.
В левом нижнем углу появилась кнопка «Найти записи» при нажатии на которую открывается окно поиска.
Все отлично, за исключением того, что плагин ничего не ищет 
Дело в том, что при нажатии на кнопку «Найти» плагин только передает условия поиска серверному (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.
Для этого примера вы получите такой объект
Как видите он содержит свойство groupOp значение которого равно AND. И свойство rules, которое содержит массив со всеми введенными условиями поиска.
В каждое условие входит три параметра:
field – имя поля;
op – тип операции сравнения;
data – данные для сравнения.
Используя эти данные, мы можем сконструировать WHERE часть запроса и найти нужные записи.
Обратите внимание. Нужно очень внимательно проверять полученные данные. Иначе ваш скрипт станет уязвимым.
Теперь посмотрите на код скрипта (getdata.php).
- <?php
- require_once('dbdata.php');
- try {
- //читаем параметры
- $curPage = $_POST['page'];
- $rowsPerPage = $_POST['rows'];
- $sortingField = $_POST['sidx'];
- $sortingOrder = $_POST['sord'];
- //подключаемся к базе
- $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
- //указываем, мы хотим использовать utf8
- $dbh->exec('SET CHARACTER SET utf8');
- $qWhere = '';
- //определяем команду (поиск или просто запрос на вывод данных)
- //если поиск, конструируем WHERE часть запроса
- if (isset($_POST['_search']) && $_POST['_search'] == 'true') {
- $allowedFields = array('surname', 'fname', 'lname');
- $allowedOperations = array('AND', 'OR');
- $searchData = json_decode($_POST['filters']);
- //ограничение на количество условий
- if (count($searchData->rules) > 10) {
- throw new Exception('Cool hacker is here!!!
- }
- $qWhere = ' WHERE ';
- $firstElem = true;
- //объединяем все полученные условия
- foreach ($searchData->rules as $rule) {
- if (!$firstElem) {
- //объединяем условия (с помощью AND или OR)
- if (in_array($searchData->groupOp, $allowedOperations)) {
- $qWhere .= ' '.$searchData->groupOp.' ';
- }
- else {
- //если получили не существующее условие - возвращаем описание ошибки
- throw new Exception('Cool hacker is here!!!
- }
- }
- else {
- $firstElem = false;
- }
- //вставляем условия
- if (in_array($rule->field, $allowedFields)) {
- switch ($rule->op) {
- case 'eq': $qWhere .= $rule->field.' = '.$dbh->quote($rule->data); break;
- case 'ne': $qWhere .= $rule->field.' <> '.$dbh->quote($rule->data); break;
- case 'bw': $qWhere .= $rule->field.' LIKE '.$dbh->quote($rule->data.'%'); break;
- case 'cn': $qWhere .= $rule->field.' LIKE '.$dbh->quote('%'.$rule->data.'%'); break;
- default: throw new Exception('Cool hacker is here!!!
- }
- }
- else {
- //если получили не существующее условие - возвращаем описание ошибки
- throw new Exception('Cool hacker is here!!!
- }
- }
- }
- //определяем количество записей в таблице
- $rows = $dbh->query('SELECT COUNT(id) AS count FROM users'.$qWhere);
- $totalRows = $rows->fetch(PDO::FETCH_ASSOC);
- $firstRowIndex = $curPage * $rowsPerPage - $rowsPerPage;
- //получаем список пользователей из базы
- $res = $dbh->query('SELECT * FROM users '.$qWhere.' ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);
- //сохраняем номер текущей страницы, общее количество страниц и общее количество записей
- $response->page = $curPage;
- $response->total = ceil($totalRows['count'] / $rowsPerPage);
- $response->records = $totalRows['count'];
- $i=0;
- while($row = $res->fetch(PDO::FETCH_ASSOC)) {
- $response->rows[$i]['id']=$row['id'];
- $response->rows[$i]['cell']=array($row['id'], $row['surname'], $row['fname'], $row['lname']);
- $i++;
- }
- echo json_encode($response);
- }
- catch (Exception $e) {
- echo json_encode(array('errMess'=>'Error: '.$e->getMessage()));
- }
- // 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).
Дальнейшее описание работы скрипта вы найдете в первой части.
В общем, разница между обычным отображением данных из таблицы и поиском сводится к выполнению более сложного запроса (с условиями).
Для формы, изображенной на следующем рисунке
мы получим такой запрос
-
SELECT * FROM users WHERE surname = 'Иванов' AND fname LIKE '%ван%' AND lname LIKE 'И%' ORDER BY id ASC LIMIT 0, 5
Надеюсь, принцип работы вы поняли. Если есть вопросы – спрашивайте, постараюсь ответить.
Интересно почитать
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в Ajax, HTML, JavaScript, PHP, Web разработка Комментарии (110) »
Комментарии (110)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
> Мы рассмотрим последний вариант (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 и счастье появилось! Спасибо большое за подсказку!
Спасибо за статью!
Любопытно было бы узнать какое количестве записей в jqGrid вытягивает напр., ие? (отобразить, искать итд)
Когда появляется лаг?
Спасибо
Количество записей на одной странице в таблице вы указываете сами. Точного числа при котором появляются лаги я не знаю, но думаю оно будет значительно больше, чем допустимое для комфортной работы пользователя
На демо страничке поиск не работает. Сначала подумал что это из за Хрома, попробовал Mozilla тоже не ищет. Когда нажимаю искать по имени "Сергей" появляется иконка ожидания и все остается на месте ))
Большое спасибо за замечание!
Исправил.
Когда переносил скрипт на хостинг забыл, что там другие настройки.
Спасибо =)
Уже нашел ошибку.
В опубликованном примере, если перейти на вторую страничку данных в jgrid, при установленной пагинации в 5 записей, а потом изменить пагинацию на большее число записей, данные не отображаются и перейти на первую страницу становится невозможным
Спасибо. Я не обращал на этот момент внимания.
В любом случае проблема решается добавлением проверок в серверном скрипте или простым кликом по кнопке "Обновить"
Спасибо за пример!!! Скачал со странички файлы, сделал все как написано(создал БД, скопировал файлы), но поиск так и не работает! Вижу данные, могу их исправлять, а вот поиск не работает! Подскажите пожалуйста в чем ошибка?
Попробуйте так.
Создайте в папке с примером файл .htaccess с одной строчкой
php_flag magic_quotes_gpc Off
Спасибо все заработало!!!
Вот мне интересно, а можно в форме поиска сделать так, чтоб можно было: Выбрать поле (напр. организация), потом выбрать Равно и сделать комбобокс, в который будут подтягиваться данные с mysql (список организаций). Заранее спасибо за ответ.
Сделать такое однозначно можно. Я правда не уверен что будет проще написать такую форму с нуля или ковыряться в настройках jqGrid.
Если делать с нуля, то нужна форма с двумя полями. В первом – выбор поля БД, на второе повесить какую-нибудь библиотеку автозаполения (autocomplete), например, эту.
Спасибо. Наверное, сделаю уже по старинке, а то проект горит, так будет быстрее. А потом уже на досуге поэкспериментирую. И за уроки спасибо. Очень полезные!
Пытаюсь сделать grid хотя бы просто для отображения данных с сортировкой и перелистыванием, но ничего не получается.
У меня один скрипт php, в котором есть форма, где выбираются параметры поиска, action формы настроен на этот же скрипт, т.е. здесь же POST-данные получаются и на основе них строится запрос, результаты которого собственно и нужно отобразить в Grid.
Подскажите, плиз, кто чем сможет
Заранее благодарен.
С уважением
А скрипты из этой и предыдущих статей вы пробовали запускать? У меня они 100% работают. Можете сравнить (построчно) со своими и найти ошибку.
да, я взял скрипт с одной из ваших статей. когда его ставлю в обычную html-страницу – всё ок, получает и отображает данные. только встраиваю его вовнутрь php-скрипта – он перестаёт работать, а сверху выводится JSON-строка…Отмечу, что в jqGrid скрипте в качестве url я указываю тот php-скрипт, в который я его встраиваю.
Т.е. если вы просто переименовываете html файл из моего примера в php он перестает работать?
Или он не работает внутри вашего php скрипта?
внутри моего php-скрипта
Тогда сравнивайте страницы, которые получает браузер. Т.е. запустите через браузер ваш скрипт и с помощь Firebug посмотрите какие скрипты получены и какие запросы отправляются.
И сравните их с работающим примером.
Попытался добавить к данному примеру строку, добавляющую верхнюю поисковую панель ->
jQuery("#list").filterToolbar(); Получается следующее:
1. Строка поиска добавляется
2. Поиск с Вашего примера работает
3. Поиск с filterToolbar – не работает, не создается переменная _POST[filters]
Поможете решить задачку?
и как оказалось она недолжна создаваться
придется править getdata.php под это.
да, в таких ситуация нужно подстраиваться под плагин. Смотреть какие данные он отправляет и обрабатывать их.
Делаю отображение данных таблички MySQL в jqGrid. Почему-то долго формируется сам грид – порядка 7-и секунд (записей всего 10 штук). Может кто сталкивался с такой проблемкой?
Проверьте (из консоли) сколько времени выполняется запрос к базе.
Запрос занял 0.0016 сек. Сделал копию базы на другой хост – грид сформировался за 1.5 сек. Видимо что-то с тем сервером.
никто не сталкивался с проблемой задвоения кнопок в навибаре?
<table class="ui-pg-table navtable" …
<table class="ui-pg-table navtable" …
Я сам не сталкивался. Но если вы можете выложить где-нибудь ваш скрипт я посмотрю.
спасибо, за отклик, вот мой скрипт …
http://onsib.ru/jslib.php
http://onsib.ru/doublebar.jpg
Попробуйте явно указать какие кнопки вам нужны.
Т.е. вместо вызова
…navGrid();
использовать что-то вроде
.navGrid('#pager',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"})
из этого примера
не помогло, задваивает и их
Тогда можно по-другому попробовать.
Взять стандартный пример (с оф.сайта или из этого поста) и по частям вставлять в него ваш код. До тех пор пока не появится раздвоение.
Есть такая проблемка: у меня данные берутся из разных таблиц бд.И в запросе WHERE уже присутствует, а в скрипте еще появляется WHERE когда мы включаем поиск!Что делать та?
Например:
Делать первый запрос SELECT_INTO_TABLE – формируется промежуточная таблица по которой делаем дальнейший поиск.
Понимаете, мой скрипт – это только пример использования. Для работы плагина вы должны предоставить данные. Откуда вы их возьмете из БД, из файла, получите XML-RPC запросом, не важно.
Если у вас структура данных отличается от этого примера, то и скрипт нужно переписать под нее.
Решение Романа самое простое. Так вам скорее всего практически не придется переписывать код. Но в результате у вас будет выполняться 2 запроса вместо одного.
Поэтому я вам советую попробовать создать объединенный запрос. Возможно для этого будет достаточно объединить условия через AND.
Не совсем в тему, но подскажите,могу ли я и как с помощью FIREBUG увидеть сформированный таким образом сам sql-запрос? Как я понимаю, в консоли в закладке ОТВЕТ я вижу уже результат работы запроса.Спасибо.
Чтобы увидеть запрос firebug'ом, его нужно отправить браузеру. Попробуйте использовать расширение firePHP.
У меня есть две статьи о нём.
1) Программирование на PHP. Использование FirePHP для отладки web приложений
2) Программирование на PHP. Подключаем FirePHP к фреймворку CodeIgniter
Замечательный пример!
Подскажите, пожалуйста, куда копать.
Очень даже пригодился! Вот тока после переделки у меня почему-то не работает добавление новой записи (хотя add:true). Модальное окно открывается, но по "Сохранить" ничего не добавляется
Копать нужно firebug'ом. Прежде всего проверить адрес скрипта, который вызывается при нажатии на кнопку "Сохранить". Потом посмотреть параметры, которые отправляются (названия и значения). Убедиться, что серверный скрипт читает эти же параметры. И, конечно, посмотреть ответ скрипта.
Здравствуйте!
Я в 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!
так.. похоже скрипт умеет переносить только поля без пробелов и латиницей… а надо чтоб все красиво было!((
кто может подскажите!
Только что попробовал. В моем демонстрационном примере отлично сохраняется текст (кириллица) с пробелами. Какие кодировки используются в вашей БД? Должно быть UTF-8.
сведения из phpmyadmin
MySQL-кодировка: UTF-8 Unicode (utf8)
Сопоставление соединения с MySQL: utf8_unicode_ci
сравнение плей cp12-51
проблема решается только сменой кодировки?
попытался поменять сравнение:
Ответ MySQL:
#1283 – Column 'title' cannot be part of FULLTEXT index
ладно, сравнение удалось изменить, но таблице лучше не стало.
могу кинуть php и js файлики.. просто сам думаю не разберусь..
не подскажете как установить фильтр прямо в таблице?
демо-кусок в исходных кодах страницы посмотрите, может поможет
роман, ты сам делал этот пример?
да я его уже смотрел сто раз. Мой проект использует jqGrid-3.4.1(stable)
а это фильтр в новой версии 3.5 в 3.4 он наверно не работает?
Эта ссылка на кусок моего проекта, там реализован фильтр.
роман, если твой, то не мог бы ты выложить как ты сделал вывод кирилицы? пхп файл и примерную структуру БД
Да, сам. На мой емайл скинь письмо -> kuprijanov@gmail.com
Постараюсь к вечеру базу скинуть с исходниками.
Многие просят исходники моей тестовой страницы -> http://www.vodokanal-kaliningrad.ru/ITFinances/
Исходники выложил здесь -> http://www.vodokanal-kaliningrad.ru/ITFinances/src.rar
Пользуйтесь на здоровье.
Хороший пример!
Спасиб за пример. Проще учится на примерах.
скинул
хе) к вечеру. у меня уже 9 вечера) можешь сейчас найти ответить?
Тоже надо исходник, письмио вам отправил.
Ура! Получилось!)) Спасибо! но теперь встала проблема переноса по строкам в таблице т.к. в одном поле у меня оч большая статья
Увеличьте насколько возможно ширину столбца, а для редактирования используйте 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;
а как можно сделать сортировку по дате? просто так не получается..
Параметры сортировки указываются при настройке плагина.
sortname – поле, которое по-умолчанию используется для сортировки;
sortorder – порядок сортировки.
да, я это знаю.дата в формате дд.мм.гггг ,но когда я так делаю у меня сортировка идет по дд
Есть параметр datefmt, он позволяет менять формат (кстати, по умолчанию Y-m-d, такие даты должны правильно сортироваться).
Кроме того, в документации я читал, что даты типа "05 янв 2009" правильно отсортировать нельзя.
Пока придумал только одно решение (не очень красивое). Добавить столбец (скрытый) и сортировать по значениям в нем.
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.
столкнулся с проблемой фильтрации/поиска при помощи своих контролов. Для "задумчивых" пользователей форма поиска очень сложна и мне необходимо добавить возможность фильтрации при помощи отдельно стоящего селекта и кнопки (условно).
Можно конечно писать параметры в 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'ом что отвечает сервер.
При работе с 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');
Практически подобрался к поиску. Пока не нашел (наверное плохо искал), нужен пример для "диапазона", т.е. когда значение поля скажем дата или сумма попадает в какой-то диапазон. Ниже пример как оно уже в запрос попадает.
"(date BETWEEN STR_TO_DATE('".$date1."','%d.%m.%Y') AND
STR_TO_DATE('".$date2."','%d.%m.%Y')) AND (sum BETWEEN ".$sum1." AND ".$sum2.")"
Запрос вроде правильно составлен. Если пришлёте дамп базы (желательно с какими-нибудь данными) я попробую потестировать.
Нет, запрос работает, все ок. Думаю как красиво форму для поиска прицепить. Т.е. скажем поля, по которым нужно задавать диапазон прийдется вынести отдельной строкой скажем над гридом, а остальные оставить в штатном поиске, когда фильтр прямо сверху столбца приделан. Но вот как это сделать, т.к. если поставим search=false, что бы поле фильтра над столбцом не светился по которому диапазон задаем, то как заставить брать значение из инпутов которые над гридом находится будут. Правда есть еще вариант написать пхп-скрипт, и при изменении инпутов сохранять их в переменных сессиии, а потом обращаться уже напрямую в скрипте, который готовит данные для грида.
Писать PHP скрипт по-моему не обязательно.
После того, как пользователь откроет форму поиска, вы сможете прочитать значения, введённые в поля, размещённые над гридом.
Что-то подобное я делал в этом примере.
Отличная штука jqGrid и статьи ваши полезные очень. Но вот появилась задача простая – сделать кнопку (в виде лупы которая) сделать сверху таблицы. И эта простая с виду задача вызвала затруднения. В итоге появились вопросы:
1) можно ли эту кнопку сделать сверху, но чтобы по ней всплывал стандартный поиск-фильтр (как у вас в примере). Я нашёл вариант с filterGrid, но он просто добавляет в заголовки поля поиска, а это не очень удобно.
2) можно ли сделать этот поиск-фильтр не всплывающим, а просто например сверху таблицы. Я пытался в стилях поправить, но этого мало – надо ещё копаться в JavaScript коде, а это сложно, потому что у них там функции c названиями типа F,G,H.
3) последний вопрос вытекает из первых двух. Если предыдущие вещи нельзя сделать с помощью их настроек, то нет ли у них на такой случай какого-то интерфейса, чтобы можно было вызывать события с помощью каких-то функций. Ну типа "начать сортировку с такими параметрами" и тп. Это сильно помогло бы не завязываться на их дизайн и компановку.
Спасибо, если сможете ответить.
Я этого сделать не пробовал. Но что если просто поменять строки 17 и 18 (в первом листинге) местами.
По третьему пункту я не понял о каком интерфейсе речь.
Строки я менял – не помогло. Там в принципе и по дизайну видно, что он подгоняет под таблицу. Про третий пункт я имел ввиду, чтобы события грида можно было вешать на мою кнопку. Что-то типа trigger('reloadGrid'), только чтобы вылезала их форма поиска (типа trigger('showSearchModal')). Вот как-то так.
Нужно курить в сторону toppager, пытаюсь разобраться как им пользоваться, второй вариант toolbar тут в принципе в демке все понятно, добавляем toolbar: [true,"top"] и
$("#t_toolbar1").append("");
$("input","#t_toolbar1").click(function(){
jQuery("#search").jqGrid('searchGrid');}
В принципе да, самое подходящее решение с верхним тулбаром. Самое смешное, что я это уже делал)) Только событие вешал на обычную кнопку. Но тогда мне показалось, что оно не использует опции из colModel…в общем тупанул наверно)) А теперь всё отлично работает. Странно конечно, что у их стандартного тулбара нет опций типа где его отображать относительно таблицы (или есть?)
Нашёл таки у них в настройках как сделать, чтобы вверху всё было!!! Оказывается у грида есть такая опция: toppager. Её надо выставить как true. Но эта опция копирует только пейджер, а не кнопки с тулбара. А кнопки с тулбара копируются вверх с помощью опции navGrid cloneToTop. Её надо поставить в true. Но этот cloneToTop появился только в версии 3.6.3. Теперь стало намного удобнее. Но всё равно неплохо было бы, чтобы advanced searching был бы инлайн, а не всплывающий. Но это надо ещё вкурить)))
Есть toppager он работает с версии 3.6.3 но я его как бы запустил посмотрел и убрал и бо штатный меня устравивает, а вот о чем я уже писал повесить добавление на ins и удаление на del интереснее, аналогично поиск можно повесить на ctrl+f
Да тут возникла задачка удалять запись по нажатию 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;
});
Но а) не работает в мозиле б)в окошкен удаления не работют клавиши стрелок, что бы фокус сдвинуть на кнопку "удалить", т.е. физически кликать приходится
А что это за событие 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() {…})
смысл тот же, забедилось
$(document).keydown(function(e)...для стрелочек тоже думаю на всплывающее окошко нужно вешать обработчик.В принципе повесил удаление на del, на стрелки вправо влево, переброс фокуса
if (e.which==37) {$("#dData").focus();}
if (e.which==39) {$("#eData").focus();}
А подсветку сделать с помощью CSS нельзя?
Тогда всё упростилось бы. Вместе с переносом фокуса, можно было бы присвоить кнопке соответствующий класс.
В css не силен, кто бы помог разобратся какой там класс отвечает за цвет выбранной кнопки. Классы я понимаю берутся из ui.
Да, классы берутся из jQuery UI. И за оформление кнопки отвечает сразу несколько классов, например, .ui-icon. Удобнее всего выбрать firebug'ом нужную кнопку и смотреть какие стили применяются именно к ней, заодно он вам покажет в каких файлах они опеределены.
Здравствуйте уважаемый Владимир!
У меня вопрос …. когда я скачал исходники…я настроил как вы говорили…НО у меня не работает ПОИСК…прочитал ваше обсуждение и всё равно не помогло….в чём дело помогите!
С Уважением George!
Чтобы ответить на этот вопрос мне нужны скриншоты firebug'а с запросом серверу (при поиске) и ответом от него (если ответ вообще пришел). Т.е. нужны скриншоты консоли с вкладками "Post" и "Ответ".
напишите пожалуйста как совместить редактирование, сортировку и поиск таблицы. никак не получается собрать их вместе.
Обещать не буду, но пожелание учту.
Секундочку, ведь в примере к этой статье работают и поиск, и редактирование, и сортировка. Что именно вы хотите собрать вместе?
Вопрос. Как autocomplete привязать. Проблема я понял в том что поля к которому привязываем еще нет и jquery дает ошибку this[0].ownerDocument is null
А потом когда форма для добавления данных выскакивает, оно уже не работает т.к. была ошибка или нужно поместить этот кусок кода в функцию, которая вызовется после появления формы.
Впрочем нашел, в editoptionsах нужно что-нибудь типа такого
dataInit: function (elem) {
$(elem).autocomplete({
serviceUrl: 'name.php',
minChars: 2,
maxHeight: 400,
width: 170,
zIndex: 2000,
params: { table: table},
deferRequestBy: 300,
});
}
Ну и про стили не забыть
Спасибо, что поделились решением! Может быть кому-то пригодится.