Установка jqGrid

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

Следующая статья — «Моя первая таблица в jqGrid».
Предыдущая статья — «Как работает jqGrid».

Перед началом

Перед тем как вы начнёте работать с jqGrid, вам нужны базовые знания Javascript.

Также вам нужны базовые знания jQuery.

Имея эти знания, вы можете начать изучать jqGrid.

Системные требования

Вам потребуется следующее:

  • Любой современный браузер: Mozilla Firefox, Safari, Google Chrome, Opera, Microsoft Internet Explorer

Если вы хотите рисовать таблицы на основе локальных (статических) данных, то вам нужно составить массив, xml-файл или JSON-файл с данными.

Но основное назначение jqGrid — это манипуляция динамическими данными в WEB. Для этого вам понадобится:

  • WEB-сервер (например: IIS, Apache, Tomcat),
  • СУБД (например: MySQL, PostgreSQL, Oracle, MSSQL)
  • Скриптовый язык для сервера (например: PHP, ASP, и т. п.)

Как и где скачать jqGrid

Если вы имеете базовые знания Javascript, jQuery и что они делают, вы готовы к изучению jqGrid!

1) Запустите Сборщик Дистрибутива на сайте jqGrid. Этот сборщик позволит вам выбрать компоненты, которые вы хотите включить в вашу сборку.

2) Получите файлы jQuery UI
Если вы новичок в jqGrid, то вам следует выбрать все компоненты. Это позволит вам свободно экспериментировать со всеми возможностями. В результате получится больший размер файла, но зато вам не придётся возвращаться к этому снова. Если вы используете jqGrid в продакшене, то вам следует рассмотреть возможность сборки дистрибутива только с теми компонентами, которые вам нужны. В результате вы получите более быструю загрузку вашего приложения.

Выберите компоненты, которые вам нужны

Главная колонка сборщика дистрибутива показывает список всех модулей в jqGrid, разбитых на группы: base, editing, subgrid, treegrid, import/export и созданные пользователями модули. Некоторые компоненты в jqGrid зависят от других компонентов. В разделе описания написано, какие модули должны быть тоже выбраны, если они зависят от них. Вам нужно сделать это вручную. Выбранные вами компоненты будут включены в один результирующий файл jquery.jqGrid.min.js.

Скачивание плагина jqGrid

Кликните Download!

Вы закончили со Сборщиком Дистрибутива! Нажмите download и вы получите ZIP-файл, содержащий всё, что вы выбрали.

После скачивания

ZIP-файл содержит следующие файлы и папки:

  • /css/
    • ui-jqgrid.css
  • /js/
    • /i18n/
      • grid.locale-bg.js
      • список всех файлов локалей (minified)
      • ….
    • Changes.txt
    • jquery-1.3.2.min.js
    • jquery.jqGrid.min.js
  • /src/
    • /i18n/
      • grid.locale-bg.js
      • список всех файлов локалей
      • ….
    • /css/
      • ui-jqgrid.css
    • grid.base.js
    • grid.celledit.js
    • grid.common.js
    • grid.custom.js
    • grid.filter.js
    • grid.formedit.js
    • grid.import.js
    • grid.inlinedit.js
    • grid.loader.js
    • grid.jqueryui.js
    • grid.subgrid.js
    • grid.tbltogrid.js
    • grid.treegrid.js
    • jqDnR.js
    • jqModal.js
    • jquery.fmatter.js
    • JsonXml.js

Как видно по структуре, необходимые файлы находятся в /css/и /js/ папках. Эти файлы минимизированы и могут использоваться в продакшене. Здесь уже есть минимизированная версия jQuery, вам не нужно дополнительно её скачивать

Файлы в папке /src/ — это исходники, которые могут использоваться разработчиками для быстрого нахождения ошибок и различных улучшений. В случае когда не используется минимизированная версия jqGrid, нужно использовать файл grid.loader.js.

Скачивание темы для jQuery UI

Начиная с версии 3.5, jqGrid полностью совместим с темами jQuery UI. Чтобы использовать jqGrid-плагин вам необходимо скачать подходящую тему. Тему можно выбрать на сайте http://jqueryui.com/themeroller/. Вы можете сделать свою собственную тему. Ищите больше информации на http://jqueryui.com. Если вы планируете использовать только таблицы, то вам вовсе не обязательно использовать все CSS-файлы, которые идут вмести в архиве. В этом случае вам нужно использовать только базовые файла ui.theme.css и ui.core.css. Эти файлы находятся в папке development-bundle/themes в скачанной теме.

Как установить

Для установки jqGrid вам нужно просто скопировать файлы и папки на ваш веб-сервер или папку, где вы разрабатываете приложение.

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

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

Базовая установка

Шаг 1: Распакуйте jqGrid и UI Theme ZIP-файлы во временную папку.

Шаг 2: Создайте папку на вашем WEB-сервере для хранения файлов и папок jqGrid и темы jQuery UI. Например:

http://myserver/myproject/где myproject — это папка, которую вы создали.

Шаг 3: Внутри папки myproject создайте две дополнительные папки js и css.

Шаг 4: Скопируйте файл ui-jqgrid.css из папки css дистрибутива jqGrid в созданную папку css внутри myproject.
Важно. Будьте осторожны. Не скопируйте по ошибке файл ui-jqgrid.css из папки src/css дистрибутива.

Шаг 5: Скопируйте все файлы и каталоги из каталога js дистрибутива jqGrid в созданную папку js внутри myproject.

Шаг 6: Скопируйте все папки и файлы из папки css дистрибутива UI Theme в папку css внутри myproject. (В примере ниже используется тема "lightness" . Если вы выберите другую тему, то ваше имя папки будет другим).

После этих шести шагов вы имеете следующую структуру:

  • /myproject/css/
    • ui.jqgrid.css
    • /ui-lightness/
      • /images/
      • jquery-ui-1.7.2.custom.css
  • /myproject/js/
    • /i18n/
      • grid.locale-bg.js
      • список языковых файлов
      • ….
    • Changes.txt
    • jquery-1.4.2.min.js
    • jquery.jqGrid.min.js

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

Сохраните этот файл в каталог myproject.

Объяснение кода: В коде выше первый stylesheet загружает CSS-код для выбранной темы UI theme («lightness» в этом примере). Второй stylesheet загружает CSS для самого jqGrid.

Ниже таблиц стилей расположены три файла javascript: перый — JQuery, второй — языковый файл для jqGrid, (English, -en в этом примере), и в конце минимизированный файл jqGrid.
Рекомендуется использование объявления DOCTYPE в начале страницы. Конечно вы можете выбрать другой тип в соответствии с вашими потребностями.

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

Заметка: Есть ещё одна рекомендация. Темы jQuery UI используют другой размер шрифта, поэтому уменьшить размер шрифта, чтобы привести всё к единому виду — это хорошая идея. Это может быть сделано добавлением тега style под подключением файлов со стилями. Смотрите пример ниже.

 

Установка для разработки

Если вы выбрали установку для разработки, то ваша версия jqGrid не будет минимизирована. Это облегчит её чтение и отладку.
Начиная с версии 4.0 есть две версии установки.

Установка для разработки после версий 4.x
Этот тип установки прост. Нужно просто сменить имя файла с jquery.jqGrid.min.js на jquery.jqGrid.src.js. В действительности jquery.jqGrid.src.js — это один файл, который содержит все файлы в одном не минимизированном файле. Файл расположен в папке js где расположен файл jquery.jqGrid.min.js. Этот тип установки может выглядеть так:

 

Установка для разработки до версии 4.0.0 в случае скачивания кода с GitHub

Исходный код разбит на множество файлов. По одному файлу на каждый модуль jQuery. Это облегчает поиск нужного куска кода.

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

Скопируйте содержимое папки src из дистрибутива jqGrid в папке js в папку src внутри папки вашего проекта. После этого ваша структура должна выглядеть так:

  • /myproject/css/
    • ui-jqgrid.css
    • /ui-lightness/
      • /images/
      • jquery-ui-1.7.2.custom.css
  • /myproject/js/
    • /src/
      • /i18n/
        • grid.locale-bg.js
        • список языковых файлов
        • ….
      • /css/
        • ui-jqgrid.css
      • grid.base.js
      • grid.celledit.js
      • grid.common.js
      • grid.custom.js
      • grid.filter.js
      • grid.formedit.js
      • grid.import.js
      • grid.inlinedit.js
      • grid.loader.js
      • grid.jqueryui.js
      • grid.subgrid.js
      • grid.tbltogrid.js
      • grid.treegrid.js
      • jqDnR.js
      • jqModal.js
      • jquery.fmatter.js
      • JsonXml.js
    • jquery-1.4.2.min.js

Теперь откройте файл grid.loader.js и измените переменную pathtojsfiles на "js/src/" . Это заставит вашу версию jqGrid использовать файлы с исходными кодами вместо минимизированных файлов.

Код должен выглядеть примерно так:

Теперь в вашем HTML-файле измените пути к Javascript и CSS-файлам, чтобы они имели вид:

Всё. Установка jqGrid завершена.

 

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

Следующая статья — «Моя первая таблица в jqGrid».
Предыдущая статья — «Как работает jqGrid».

Установка jqGrid: 5 комментариев

    1. Не очень понял, что выкладывать. Там просто нужно кнопку Download нажать на странице по ссылке, указанной в статье.

  1. Здравствуйте!
    С какого-то момента отказались от файла grid.loader.js
    Также есть ещё некоторые изменения в папке js/src

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

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