jQuery-плагин jqGrid для создания красивых таблиц

Автор: Амадей Красавчик Дериглазов

Сайтостроение – дело нехитрое, особенно, если пользоваться плодами чужого труда. Сегодня я расскажу о бесплатном, очень простом и удобном jQuery-плагине, который позволит с минимальными временными затратами реализовать на своём сайте красивый табличный редактор с мощными возможностями для пользователей. Плагин этот называется jqGrid, он без головной боли позволит Вам смастерить динамическую табличку, в которой можно будет мышкой таскать столбики, расширять их, редактировать данные в ячейках, делать сортировку данных по столбцам, рассчитывать итоговые значения и много чего ещё. Чтобы подключить плагин jqGrid к своему проекту, достаточно на сайте trirand.com скачать этот самый плагин в виде zip-архива, после чего распаковать его в какую-нибудь отдельную папочку Вашего проекта. Разумеется, для работоспособности jqGrid потребуется библиотека jQuery версии не ниже 1.3. Также не является обязательной, но может потребоваться библиотека jQuery UI для использования продвинутых возможностей jqGrid или чтобы настроить нестандартным образом стиль таблицы. В минимальном варианте в разделе <head> страницы сайта, где предполагается использовать jqGrid должны фигурировать похожие 4 строчки:

<link rel="stylesheet" href="/js/jq_grid/css/ui.jqgrid.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jq_grid/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="/js/jq_grid/jquery.jqGrid.min.js"></script>

Дополнительно могут потребоваться css-файл и js-файл библиотеки jQuery UI.

Далее, чтобы отобразить красивую табличку с помощью jqGrid на страничке следует предусмотреть тег <table id=”table1”></table>. А чтобы данная заготовка превратилась в табличку достаточно будет одной строки программного кода на jQuery:

$("#table1").jqGrid( {параметр1:значение1, параметр2:значение2, …} );

Подробно узнать обо всех параметрах, отвечающих за формирование таблицы можно в подробной документации, расположенной на том же сайте, который мной упоминался выше для скачивания самого плагина jqGrid.

Здесь я укажу лишь обязательные и наиболее важные параметры.

Основные параметры для инициализации jqGrid

datatype: "xml"/"local"/"json" – тип данных, которыми заполняются ячейки таблицы

url: "имя скрипта" – адрес скрипта, который формирует данные для таблицы. Для типа данных local данный параметр не требуется

mtype: "GET"/"POST" – задаёт тип запроса к скрипту, указанному в параметре url. Для типа данных local данный параметр не требуется

colNames: ["столбец1", "столбец2", …] - перечисляются заголовки для столбцов таблицы

colModel: [{параметр1:значение1, параметр2:значение2, … }, { параметр1:значение1, параметр2:значение2, … }, …] - массив задающий свойства и возможности столбцов. Параметров определяющих свойство столбцов так же, как и свойств таблиц, огромное множество. Я в своём обзоре укажу только основные. Подробнее можно посмотреть всё в той же документации.

Основные параметры свойства colModel для таблицы jqGrid

name: название колонки

index: название поля из базы данных, из которого берутся значения для столбца

hidden: признак видимости столбца. Если hidden=true, столбец будет невидимым, если hidden=false – видимым. Значение по умолчания – hidden=false.

width: цифровое значение, которое указывает на ширину столбца в пикселях.

И на последок продемонстрирую несколько стандартных приёмов работы с источниками данных для формирования динамических таблиц jqGrid.

Примеры заполнения данными таблиц с помощью jqGrid

Первым делом опишу принципы работы с форматом данных xml. Итак, при инициализации таблицы параметр datatype должен быть определён, как “xml”, что обязывает скрипт, указываемый в параметре url, формировать данные в формате xml, имеющие следующую структуру.

<rows>
<row id="1">
<cell><![CDATA[ данные для ячейки1 в строке1 ]]></cell>
<cell><![CDATA[ данные для ячейки2 в строке1 ]]></cell>
…
</row>

<row id="2">
<cell><![CDATA[ данные для ячейки1 в строке2 ]]></cell>
<cell><![CDATA[ данные для ячейки2 в строке2 ]]></cell>
…
</row>
…
</rows>

Если же в качестве значения datatype указать local, то это будет означать, что в качестве источника данных для таблицы jqGrid служит массив, который должен иметь следующий вид:

var data = [{id:1,индекс_столбца_1:значение1, индекс_столбца_2:значение1, …},{id:2,индекс_столбца_1:значение2, индекс_столбца_2:значение2, …} … ] – под индексом столбца понимается значение параметра index в colModel.

Далее массив можно загрузить в нашу динамическую таблицу, например, с помощью метода addRowData построчно.

for(var i=0; i<=data.length;i++) $("#table1").jqGrid("addRowData",i+1,data[i]);

Вот так быстра и без проблем можно смастерить на своём сайте табличный редактор всем на загляденье. Спасибо разработчикам этого чудо-плагина. Если Вас заинтересовали возможности данного плагина и появились вопросы. Спрашивайте – не стесняйтесь. С удовольствием отвечу всем. Например, может быть кому-нибудь интересно знать, как сделать экспорт таблицы jqGrid в Excel – я это уже делал и с удовольствием расскажу, если, конечно, появятся заинтересованные слушатели.

Дата публикации: 21.03.2016

К списку гламурных манифестов сообщества «Профессия – делать сайты»