Введение
На мой взгляд, jqGrid — самый успешный и удобный на данный момент плагин для jQuery, работающий с таблицами БД через AJAX запросы и PHP (Так же существует версия для ASP.NET).
Все подробности в данной статье я опущу, акцентируя ваше внимание лишь на вопросе, как сделать сложный поиск по таблице, используя этот плагин.
Для начала советую познакомиться:
- с самим плагином вот тут;
- с примерами его работы вот здесь;
- со статьей «Введение в jqGrid», в которой описано как связать jqGrid + php + Mysql (или иные БД).
Как получить данные БЕЗ условия «where» в этой статье описываться не будет. Предполагается, что вы прочли статью «Введение в jqGrid» и хотите теперь не просто сортировать результаты и разбивать их на страницы, а делать сложные поиски сразу по нескольким полям таблицы.
Прошу обратить особое внимание на пример, расположенный по ссылке выше, под названием «Searching (4.0) new» -> «Show query in search ».
И так, мы создали документ HTML:
<table id="newapi"></table> <div id="pnewapi"></div>
Подключили JavaScript код:
jQuery("#grps1").jqGrid({ // Привязка плагина к таблице url:'ajax/get.php', // Скрипт - обработчик ваших запросов datatype: "json", // Формат скрипта-обработчика colNames:['Inv No', 'Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id', key : true, index:'id', width:55, searchtype:"integer"}, {name:'invdate',index:'invdate', width:90}, {name:'name', index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right", searchtype:"number"}, {name:'tax',index:'tax', width:80, align:"right", searchtype:"number"}, {name:'total',index:'total', width:80,align:"right", searchtype:"number"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, width:700, rowList:[10,20,30], pager: '#pgrps1', // Привязка к таблице тулбара sortname: 'invdate', viewrecords: true, sortorder: "desc" }); jQuery("#grps1").jqGrid('navGrid','#pgrps1', // Управление тулбаром таблицы {edit:false,add:false,del:false}, // Отключаем от тулбара редактирование, добавление и удаление записей. На тулбаре останутся только две кнопки: "Поиск" и "Обновить" {}, // Опции окон редактирования {}, // Опции окон добавления {}, // Опции окон удаления { multipleSearch:true, // Поиск по нескольким полям multipleGroup:true, // Сложный поиск с подгруппами условий showQuery: true // Показывать превью условия } );
Подключили необходимые стили и скрипты (скачать можно тут):
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css"/> <script type="text/javascript" src="src/grid.loader.js"></script>
Обратите внимание, что я не подключаю библиотеку одним файлом или отдельными частями, как это можно было сделать, а использую файл «grid.loader.js», который также поставляется с исходниками на оффициальном сайте плагина. Я его немного изменил и привожу измененный отрывок кода:
... var pathtojsfiles = "src/"; // set include to false if you do not want some modules to be included var modules = [ { include: true, incfile:'i18n/grid.locale-ru.js'}, // Вот тут я изменил локаль на 'ru' ...
Используя этот файл удобно управлять компонентами этого модуля, а также выбирать его язык.
Расширенный поиск
Форма расширенного поиска:
Теперь самое сладкое. Что же нам передает jqGrid при поиске?
POST или GET параметры (в зависимости от настроек jqGrid):
- $_REQUEST['_search'] — Булево значение, если запрос с условием поиска оно принимает истинное значение;
- $_REQUEST['filters'] — Объект с условиями в представлении json;
- $_REQUEST['searchField'] — Имя поля для поиска (если условие простое);
- $_REQUEST['searchOper'] — Операция сравнения поля для поиска (если условие простое);
- $_REQUEST['searchString'] — Значение поля для поиска (если условие простое);
Теперь зная эти данные, необходимо сгенерировать строку условий «where» и передать ее необходимой процедуре, которая раннее принимала только имя сортируемой колонки, направление сортировки, номер страницы и количество записей на одну страницу (для пагинации).
Вот код, который необходимо вставить перед запросом в БД (в примере используется POST-запрос):
if($_search){ if (isset($_POST['filters'])) $filters = $_POST['filters'];// Фильтры для поиска if (isset($_POST['searchField'])) $searchField = $_POST['searchField']; // Фильтр по одному полю (имя) if (isset($_POST['searchOper'])) $searchOper = $_POST['searchOper']; // Фильтр по одному полю (операция) if (isset($_POST['searchString'])) $searchString = $_POST['searchString']; // Фильтр по одному полю (значение) $searchString = generateSearchString($filters, $searchField, $searchOper, $searchString); }
Вот «сердце» данной статьи, функции генерации условия для поиска в БД.
Функция generateSearchString():
function generateSearchString($filters, $searchField, $searchOper, $searchString){ $where = ''; if($filters){ $filters = json_decode($filters); $where .= self::generateSearchStringFromObj($filters); } return $where; }
Рекурсивная функция generateSearchStringFromObj() генерации условий для выборки из БД:
function generateSearchStringFromObj($filters){ $where = ''; // Генерация условий группы фильтров if(count($filters)) foreach($filters->rules as $index => $rule){ $rule->data = addslashes($rule->data); $where .= "`".preg_replace('/-|\'|\"/', '', $rule->field)."`"; switch($rule->op){ // В будущем будет больше вариантов для всех вохможных условий jqGrid case 'eq': $where .= " = '".$rule->data."'"; break; case 'ne': $where .= " != '".$rule->data."'"; break; case 'bw': $where .= " LIKE '".$rule->data."%'"; break; case 'bn': $where .= " NOT LIKE '".$rule->data."%'"; break; case 'ew': $where .= " LIKE '%".$rule->data."'"; break; case 'en': $where .= " NOT LIKE '%".$rule->data."'"; break; case 'cn': $where .= " LIKE '%".$rule->data."%'"; break; case 'nc': $where .= " NOT LIKE '%".$rule->data."%'"; break; case 'nu': $where .= " IS NULL"; break; case 'nn': $where .= " IS NOT NULL"; break; case 'in': $where .= " IN ('".str_replace(",", "','", $rule->data)."')"; break; case 'ni': $where .= " NOT IN ('".str_replace(",", "','", $rule->data)."')"; break; } // Добавить логику соединения, если это не последние условие if(count($filters->rules) != ($index + 1)) $where .= " ".addslashes($filters->groupOp)." "; } // Генерация условий подгруппы фильтров $isSubGroup = false; if(isset($filters->groups)) foreach($filters->groups as $groupFilters){ $groupWhere = self::generateSearchStringFromObj($groupFilters); // Если подгруппа фильтров содержит условия, то добавить их if($groupWhere){ // Добавить логику соединения, если условия подгруппы фильтров добавляются после условий фильтров этой группы // или после условий других подгрупп фильтров if(count($filters->rules) or $isSubGroup) $where .= " ".addslashes($filters->groupOp)." "; $where .= $groupWhere; $isSubGroup = true; // Флаг, определяющий, что было хоть одно условие подгрупп фильтров } } if($where) return '('.$where.')'; return ''; // Условий нет }
P.S.
Форма inline-поиска:
ВНИМАНИЕ: данная формула не будет работать при inline-поиске. При inline-поиске jqGrid будет передавать в параметрах запроса имена колонок и их значения.
echo $_POST['id']; // Выведет 3, если пользователь ввел в строку поиска под колонкой id цифру 3
Таким образом для реализации inline-поиска по `id` достаточно написать такой код:
$where = "`id` = " . (int)$_POST['id'];
Для поиска по нескольким полям к условию соответственно будут добавляться дополнительные строки, соединенные между собой «AND». Естественно вместо равенства можно использовать любой условие, позволительное для вашей БД.
Исходник файла-обработчика запросов AJAX от jqGrid. (Внимательно читайте комментарии, скрипт будет работать, только если вы настроете подключение к БД и впишите вместо моего обращение к модулю свой запроса к БД).
