Создание табличной формы с помощью jqGrid

Для современных систем учёта стандартные таблицы из HTML мало подходят. Нужна подгрузка данных из JSON, нужна постраничная разбивка, нужно обновлять данные без перезагрузки страницы, нужна сортировка и многое другое.

Более красивую и современную форму можно сделать с помощью jqGrid. Дистрибутив jqGrid можно скачать по ссылке в конце статьи. Затем нужно сначала добавить на страницу загрузку необходимых ресурсов.

Теперь нужно объявить тег table для самого jqGrid и div для навигации по страницам:

 

Инициализируем jqGrid. В качестве параметра передаём идентификатор тега table.

Здесь url  — адрес страницы, с которой будут загружаться данные, colModel — описание колонок, pager — идентификатор div, в котором будут рисоваться элементы для постраничной навигации, rowNum — количество строк на странице. На url будет отсылаться запрос с параметром page (номер страницы). Например, data.json?page=3. Параметры regional и forceRegional устанавливают русский язык.

С сервера должна возвращаться json следующего вида:

Здесь records — общее количество записей, page — номер текущей страницы (с единицы), total — количество страниц, rows — сами строки.

Теперь код всей страницы вместе:

 

 

 

Официальный сайт jqGrid: http://jqgrid.com/

 

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

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