Моя первая таблица в jqGrid

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Соглашения при работе с jqGrid».
Предыдущая статья — «Установка jqGrid».

Моя первая таблица

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

Вам потребуется:

  1. База данных с какими-нибудь данными.
  2. HTML-страница для отображения данных.
  3. Серверный компонент для работы в качестве связующего звена между базой данных и интерфейсом.

Наш пример будет отображать следующую информацию:

  • Invid – номер счёт-фактуры,
  • Invdate – дата счёт-фактуры,
  • Amount – сумма,
  • Tax – налог,
  • Total (включая налог),
  • Note – дополнительная текстовая информация.

Данные

Нам потребуется таблица с данными в этом формате. Этот пример использует MySQL:

Теперь заполните эту таблицу какими-нибудь данными.

(Здесь таблица с  644 записями. Можете использовать её или придумайте свои данные. Колонка «A» пуста, так как она должна увеличиваться автоматически вашей базой данных.)

dataupload.xls

HTML-страница

HTML-страница выполняет три цели: загружает все необходимые jqGrid файлы, содержит место для таблицы, содержит инструкции по настройке таблицы.

Используя файл myfirstgrid.html, как описано в  статье по установке, мы получим следующий код:

Объяснение кода

Мы используем функцию jQuery $ для запуска нашего скрипта в подходящее время. Для получения большей информации об этом обратиться к документации на jQuery.

Описание необходимых файлов .js и .css дано в статье по установке.
Таблица может быть расположена в любом месте между тегами <body>. Объявление таблицы сделано с помощью тега <table>, как показано ниже:

Таблица должна иметь 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 со структурой:

Используемые элементы:

Тег Описание
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».

Сохраните файл под именем «example.php» и расположите его в папке myproject. Вы готовы к созданию вашей первой таблицы.

 

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Соглашения при работе с jqGrid».
Предыдущая статья — «Установка jqGrid».

Моя первая таблица в jqGrid: 2 комментария

  1. Попробовал воспроизвести,но наткнулся на то что нет содержимого файла dbconfig.php.

    1. В файле dbconfig.php должны быть просто переменные $dbhost, $dbuser, $dbpassword и $database, которые содержат настройки подключения к базе данных. Примерно вот так:


      Значения у каждого свои, поэтому здесь не приведено.

Добавить комментарий

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