Пример сводной таблицы (Pivot Table) в jqGrid

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

Следующая статья — «Выгрузка и загрузка в jqGrid».
Предыдущая статья — «Методы и свойства сводной таблицы в jqGrid».

В этом примере мы попробуем построить сводную таблицу.

Данные

Предположим, что мы имеем таблицу с продажами, которая содержит следующие поля:

  • Категория
  • Продукт
  • Страна
  • Общая цена
  • Количество

Таблица создаётся с помощью следующего кода:

Данные достаются из базы данных Northwind с помощью следующего SQL:

JSON-ответ сервера на AJAX-запрос (свойство url : 'data.json') имеет следующую структуру:

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

Эта цель может быть достигнута с помощью другого SQL-запроса, но… ваш провайдер не разрешает добавлять новый запрос или изменять существующий. Что делать?

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

Настройка свойств

По заданию боса мы видим, что категории и продукты — это поля, которые будут использоваться нашей таблицей. Эти данные «статичны» и мы должны сказать об этом jqPivotGrid. Для этого используется свойство xDimension:

Эти свойства говорят jqPivotGrid, что данные будут группироваться сначала по категории, а затем по продукту.

Эти поля должны браться из JSON-ответа, где из имена: CategoryName, ProductName (смотрите JSON-ответ выше).

Дальше мы должны указать jqPivotGrid какое поле является полем страны. С этим мы создаём динамические колонки (yDimension).

Судя по исходным данным это поле Country. Теперь настройка будет выглядеть так:

Теперь нужно указать, по какому полю мы собираемся суммировать:

Теперь осталось указать, как делать итоги колонок и столбцов. Это достигается двумя строчками кода:
rowTotals : true and
colTotals: true

Конечный код настройки jqGrid:

Посмотреть конечный результат.

 

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

Следующая статья — «Выгрузка и загрузка в jqGrid».
Предыдущая статья — «Методы и свойства сводной таблицы в jqGrid».


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

Ваш e-mail не будет опубликован.

*