Цикл статей «Документация jqGrid на русском».
Следующая статья — «Соглашения при работе с jqGrid».
Предыдущая статья — «Установка jqGrid».
Моя первая таблица
Для этого примера и как пример, на который будут ссылаться все остальные статьи, мы создадим таблицу товарных счёт-фактур.
Вам потребуется:
-
База данных с какими-нибудь данными.
-
HTML-страница для отображения данных.
-
Серверный компонент для работы в качестве связующего звена между базой данных и интерфейсом.
Наш пример будет отображать следующую информацию:
-
Invid – номер счёт-фактуры,
-
Invdate – дата счёт-фактуры,
-
Amount – сумма,
-
Tax – налог,
-
Total (включая налог),
-
Note – дополнительная текстовая информация.
Данные
Нам потребуется таблица с данными в этом формате. Этот пример использует MySQL:
1 2 3 4 5 6 7 8 9 10 |
CREATE TABLE invheader ( invid int(11) NOT NULL AUTO_INCREMENT, invdate date NOT NULL, client_id int(11) NOT NULL, amount decimal(10,2) NOT NULL DEFAULT '0.00', tax decimal(10,2) NOT NULL DEFAULT '0.00', total decimal(10,2) NOT NULL DEFAULT '0.00', note char(100) DEFAULT NULL, PRIMARY KEY (invid) ); |
Теперь заполните эту таблицу какими-нибудь данными.
(Здесь таблица с 644 записями. Можете использовать её или придумайте свои данные. Колонка «A» пуста, так как она должна увеличиваться автоматически вашей базой данных.)
HTML-страница
HTML-страница выполняет три цели: загружает все необходимые jqGrid файлы, содержит место для таблицы, содержит инструкции по настройке таблицы.
Используя файл myfirstgrid.html, как описано в статье по установке, мы получим следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <style type="text/css"> html, body { margin: 0; padding: 0; font-size: 75%; } </style> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#list").jqGrid({ url: "example.php", datatype: "xml", mtype: "GET", colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"], colModel: [ { name: "invid", width: 55 }, { name: "invdate", width: 90 }, { name: "amount", width: 80, align: "right" }, { name: "tax", width: 80, align: "right" }, { name: "total", width: 80, align: "right" }, { name: "note", width: 150, sortable: false } ], pager: "#pager", rowNum: 10, rowList: [10, 20, 30], sortname: "invid", sortorder: "desc", viewrecords: true, gridview: true, autoencode: true, caption: "My first grid" }); }); </script> </head> <body> <table id="list"><tr><td></td></tr></table> <div id="pager"></div> </body> </html> |
Объяснение кода
Мы используем функцию jQuery $ для запуска нашего скрипта в подходящее время. Для получения большей информации об этом обратиться к документации на jQuery.
Таблица может быть расположена в любом месте между тегами <body>. Объявление таблицы сделано с помощью тега <table>, как показано ниже:
1 2 3 4 5 6 |
<body> … <table id="list"><tr><td></td></tr></table> <div id="pager"></div> … </body> |
Таблица должна иметь id уникальный по всему HTML-документу. В примере выше этот id равен «#list». Это id важен, потому что он потребуется вам для обращения к функциям таблицы. Элементы <tr><td></td></tr> внутри <table> нужны только для того, чтобы сделать документа корректным документом XHTML 1.0 Strict Document. Эти элементы будут удалены при инициализации jqGrid.
Во многих примерах вы увидите символы «#» перед значениями id. Рекомендуется всегда их ставить, хотя jqGrid работает и без указания символа «#».
Cellspacing, cellpadding и border атрибуты добавляются jqGrid и не должны включаться в ваше определение таблицы.
Для многих таблиц вам захочется иметь возможность постраничной навигации по данным. Эта возможность включается с помощью добавления тега <div> с идентификатором «#pager» в приведённом выше примере. Важно использовать уникальные id для панели навигации.
Панель навигации может быть расположена в любом месте HTML-документа. Обычно она расположена под таблицей, как в этом примере.
Настройки, используемые в этом примере, описаны здесь:
Свойство | Описание |
---|---|
url | Откуда брать данные. Обычно на стороне сервера происходит подключение к базе данных, и возвращаются данные, подходящие для этой таблицы. |
datatype | Тип возвращаемых url данных. В этом примере мы указываем, что тип данных будет XML. |
mtype | Каким методом делать Ajax-вызов (GET или POST). В этом примере мы используем метод GET. |
colNames | Названия колонок. |
colModel | Массив, описывающий модели колонок. Это самая важная часть таблицы. Опции, которые использовались в этом примере: name: Название колонки. Оно не обязано совпадать с именем колонки в базе данных. Позже будет объяснено, как можно использовать это имя. index: Название, которое будет отправлено на сервер, когда будет указываться сортировка (мы можем передавать индексы колонок вместо имени). Обычно это имя поля из базы данных. width: Ширина колонки в пикселях. align: Выравнивание колонки. sortable: Указывает, можно ли сортировать по этой колонке. Если указано false, то клик по заголовку колонки не будет иметь эффекта. |
pager | Указывает на то, что мы хотим использовать кнопки навигации для перехода по страницам. Это должен быть корректный HTML-элемент. В нашем примере мы даём div с id=pager. Панель навигации может быть расположена в любом месте HTML-документа. В этом примере мы расположили её под телом таблицы. |
rowNum | Сколько колонок отображать в таблице. Этот параметр добавляется к URL при отправке на сервер. |
rowList | Массив, на основе которого будет создаваться выпадающий список в панели навигации, с помощью которого мы сможем изменять количество видимых строк. |
sortname | Колонка, по которой будет происходить первоначальная сортировка. Может быть названием или индексом. Этот параметр будет добавляться к URL при запросе данных. |
viewrecords | Показывать общее количество записей. |
caption | Заголовок таблицы. Если не указывать, то заголовок таблицы не будет виден. |
Мы сделали половину работы. Следующим шагом будет создание скрипта для сервера, который будет возвращать данные для нашей таблицы.
За кулисами: данные таблицы
Во время работы jqGrid запускает скрипт, расположенный по URL, указанному в настройках таблицы, который запрашивает данные с базы данных (если вы не используете статические данные). Сервер возвращает данные в формате, понятном jqGrid.
JqGrid поддерживает разные форматы данных. Но по умолчанию используется формат XML со структурой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version ="1.0" encoding="utf-8"?> <rows> <page> </page> <total> </total> <records> </records> <row id = 'unique_rowid'> <cell> cellcontent </cell> <cell> <![CDATA[<font color='red'>cell</font> content]]> </cell> … </row> <row id = 'unique_rowid'> <cell> cellcontent </cell> <cell> <![CDATA[<font color='red'>cell</font> content]]> </cell> … </row> … </rows> |
Используемые элементы:
Тег | Описание |
---|---|
rows | Корневой элемент для таблицы. |
page | Номер запрошенной страницы. |
total | Общее количество страниц. |
records | Общее количество записей |
row | Строка для таблицы. |
cell | Данные. Можно использовать CDATA. Это значит, что можно использовать картинки, ссылки и check box-ы. |
Количество элементов cell в каждой строке должно совпадать с количеством ячеек, объявленных в colModel. В нашем примере мы объявили шесть колонок, поэтому для каждого элемента row должно быть шесть элементов cell.
Обратите внимание на атрибут id в элементах. Этот атрибут может быть опущен, но хорошим тоном считается иметь уникальный id для каждой строки. Если этот атрибут опущен, то jqGrid имеет два пути решения проблемы уникальных идентификаторов: с помощью свойства «key» в colModel, установленного в true, для одной из колонок; с помощью порядкового номера строки.
Если вы используете независимый от содержимого первичный ключ для ваших строк, то не делайте видимым значение этого ключа, а вместо этого включайте его в ответ сервера и передавайте в качестве атрибута id для элемента row. Он будет всегда доступен для jqGrid, но невидим на странице.
Пора создать файл на сервере, который будет обрабатывать запросы нашей таблицы.
Пример файла PHP и MySQL
PHP-скрипт, приведённый ниже, вызывается jqGrid для получения данных от сервера. Скрипт запрашивает данные с MySQL и возвращает их в jqGrid в виде XML.
Этот файл настроен только для чтения данных с сервера. Если вы хотите сохранять данные на сервер, то вам потребуется создать ещё один файл, который будет вызываться по URL, указанном в свойстве «editurl».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<?php // Содержит информацию, необходимую для подключения к базе данных // MySQL. Мы храним здесь логин, пароль, имя базы. include("dbconfig.php"); // К параметру url добавляются 4 параметра, как описано в colModel. // Мы должны считать эти параметры, чтобы создать SQL-запрос. // В настройках таблицы мы указали, что используем GET-метод. // И мы должны использовать подходящий способ, чтобы считать их. // В нашем случае это $_GET. Если бы мы указали, что хотим // использовать POST-метод, то мы бы использовали $_POST. // Можно использовать $_REQUEST, который содержит переменные // с GET и POST одновременно.. // Обратитесь к документации для большей информации. // Получаем номер страницы. Сначала jqGrid ставит его в 1. $page = $_GET['page']; // сколько строк мы хотим иметь в таблице - rowNum параметр $limit = $_GET['rows']; // Колонка для сортировки. Сначала sortname параметр // затем index из colModel $sidx = $_GET['sidx']; // Порядок сортировки. $sord = $_GET['sord']; // Если колонка сортировки не указана, то будем // сортировать по первой колонке. if(!$sidx) $sidx =1; // Подключаемся к MySQL $db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); // Выбираем базу данных mysql_select_db($database) or die("Error connecting to db."); // Вычисляем количество строк. Это необходимо для постраничной навигации. $result = mysql_query("SELECT COUNT(*) AS count FROM invheader"); $row = mysql_fetch_array($result,MYSQL_ASSOC); $count = $row['count']; // Вычисляем общее количество страниц. if( $count > 0 && $limit > 0) { $total_pages = ceil($count/$limit); } else { $total_pages = 0; } // Если запрашиваемый номер страницы больше общего количества страниц, // то устанавливаем номер страницы в максимальный. if ($page > $total_pages) $page=$total_pages; // Вычисляем начальное смещение строк. $start = $limit*$page - $limit; // Если начальное смещение отрицательно, // то устанавливаем его в 0. // Например, когда пользователь // выбрал 0 в качестве запрашиваемой страницы. if($start <0) $start = 0; // Запрос для получения данных. $SQL = "SELECT invid, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit"; $result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error()); // Заголовок с указанием содержимого. header("Content-type: text/xml;charset=utf-8"); $s = "<?xml version='1.0' encoding='utf-8'?>"; $s .= "<rows>"; $s .= "<page>".$page."</page>"; $s .= "<total>".$total_pages."</total>"; $s .= "<records>".$count."</records>"; // Обязательно передайте текстовые данные в CDATA while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { $s .= "<row id='". $row['invid']."'>"; $s .= "<cell>". $row['invid']."</cell>"; $s .= "<cell>". $row['invdate']."</cell>"; $s .= "<cell>". $row['amount']."</cell>"; $s .= "<cell>". $row['tax']."</cell>"; $s .= "<cell>". $row['total']."</cell>"; $s .= "<cell><![CDATA[". $row['note']."]]></cell>"; $s .= "</row>"; } $s .= "</rows>"; echo $s; ?> |
Сохраните файл под именем «example.php» и расположите его в папке myproject. Вы готовы к созданию вашей первой таблицы.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Соглашения при работе с jqGrid».
Предыдущая статья — «Установка jqGrid».
Попробовал воспроизвести,но наткнулся на то что нет содержимого файла dbconfig.php.
В файле dbconfig.php должны быть просто переменные $dbhost, $dbuser, $dbpassword и $database, которые содержат настройки подключения к базе данных. Примерно вот так:
Значения у каждого свои, поэтому здесь не приведено.