Цикл статей «Документация jqGrid на русском».
Следующая статья — «Выгрузка и загрузка в jqGrid».
Предыдущая статья — «Методы и свойства сводной таблицы в jqGrid».
В этом примере мы попробуем построить сводную таблицу.
Данные
Предположим, что мы имеем таблицу с продажами, которая содержит следующие поля:
- Категория
- Продукт
- Страна
- Общая цена
- Количество
Таблица создаётся с помощью следующего кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(document).ready(function(){ jQuery("#grid").jqGrid( { url : "data.json", loadonce: true, colModel : [ { name: "CategoryName"}, { name: "ProductName" }, { name: "Country"}, { name: "Price", "formatter": 'number', align: "right"}, { name: "Quantity", formatter:'integer', align:"right"} ], datatype:"json", width: 700, rowNum : 10, pager: "#pager", caption: "Grid" }); }); |
Данные достаются из базы данных Northwind с помощью следующего SQL:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
SELECT c.CategoryName, b.ProductName, e.Country, SUM( a.Quantity * a.UnitPrice ) AS Price, SUM(a.Quantity) AS Quantity FROM order_details a, products b, categories c, orders d, customers e WHERE a.ProductID = b.ProductID AND b.CategoryID = c.CategoryID AND a.OrderID = d.OrderID AND d.CustomerID = e.CustomerID AND (e.Country = 'UK' OR e.Country = 'USA') GROUP BY a.ProductID, e.Country |
JSON-ответ сервера на AJAX-запрос (свойство url : 'data.json') имеет следующую структуру:
1 2 3 4 5 6 |
{"rows":[ {"CategoryName":"Beverages","ProductName":"Steeleye Stout","Country":"UK","Price":"1008.0000","Quantity":"65"}, {"CategoryName":"Beverages","ProductName":"Laughing Lumberjack Lager","Country":"USA","Price":"140.0000","Quantity":"10"}, {"CategoryName":"Beverages","ProductName":"Lakkalik","Country":"USA","Price":"2160.0000","Quantity":"120"}, ... ]} |
Предположим, что ваш бос хочет знать продажи по категориями и продуктам для выбранных стран.
Эта цель может быть достигнута с помощью другого SQL-запроса, но… ваш провайдер не разрешает добавлять новый запрос или изменять существующий. Что делать?
Вы можете использовать jqPivotGrid для получения этого результата без всяких изменений на сервере. Давайте посмотрим, как это можно сделать.
Настройка свойств
По заданию боса мы видим, что категории и продукты — это поля, которые будут использоваться нашей таблицей. Эти данные «статичны» и мы должны сказать об этом jqPivotGrid. Для этого используется свойство xDimension:
1 2 3 4 5 6 7 8 9 10 11 12 |
... xDimension : [ { dataName: 'CategoryName', label : 'Категория', width : 90 }, { dataName: 'ProductName', label: 'Продукт', width: 90 } ] |
Эти свойства говорят jqPivotGrid, что данные будут группироваться сначала по категории, а затем по продукту.
Эти поля должны браться из JSON-ответа, где из имена: CategoryName, ProductName (смотрите JSON-ответ выше).
Дальше мы должны указать jqPivotGrid какое поле является полем страны. С этим мы создаём динамические колонки (yDimension).
Судя по исходным данным это поле Country. Теперь настройка будет выглядеть так:
1 2 3 4 5 6 |
... yDimension : [ { dataName: 'Country' } ] |
Теперь нужно указать, по какому полю мы собираемся суммировать:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
aggregates : [ { member : 'Price', aggregator : 'sum', width:50, label:'Сумма' }, { member : 'Quantity', aggregator : 'sum', width:50, label:'Кол-во' } ] |
Теперь осталось указать, как делать итоги колонок и столбцов. Это достигается двумя строчками кода:
rowTotals : true and
colTotals: true
Конечный код настройки jqGrid:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE HTML> <html> <head> <title>jqPivotGrid example</title> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <!-- JQuery CSS --> <link rel="stylesheet" href="../../../jquery-ui-themes-1.11.4/themes/redmond/jquery-ui.min.css" type="text/css" /> <!-- jqGrid CSS --> <link rel="stylesheet" href="../../../jqgrid-5.0.0/css/ui.jqgrid.css" type="text/css" /> <!-- JQuery --> <script src="../../../jquery-2.1.3/jquery-2.1.3.js"></script> <script src="../../../jquery-2.1.3/jquery.json.js"></script> <!-- The JQuery UI code --> <script type="text/javascript" src="../../../jquery-ui-1.11.4/jquery-ui.min.js" > </script> <!-- The jqGrid language file code--> <script type="text/javascript" src="../../../jqgrid-5.0.0/js/i18n/grid.locale-ru.js" > </script> <!-- The atual jqGrid code --> <script type="text/javascript" src="../../../jqgrid-5.0.0/js/jquery.jqGrid.20151009.min.js" > </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#grid").jqGrid('jqPivot', "data1.json", // pivot options { xDimension : [ {dataName: 'CategoryName', label : 'Категория', width: 90}, {dataName: 'ProductName', label : 'Продукт', width:90} ], yDimension : [ { dataName: 'Country' } ], aggregates : [ {member : 'Price', aggregator : 'sum', width:50, label:'Сумма'}, {member : 'Quantity', aggregator : 'sum', width:50, label:'Кол-во'} ], rowTotals : true, rowTotalsText : 'Итог', colTotals: true }, // grid options { regional : "ru", // Русская локаль forceRegional : true, width: 700, rowNum : 10, pager: "#pager", caption: "Сумма и количество по категории и продукту" }); }); </script> </head> <body> <a href=" https://urvanov.ru/2015/10/11/пример-сводной-таблицы-pivot-table-в-jqgrid"> Статья с описанием примера сводной таблицы в jqGrid (Pivot Table)</a> <p> </p> <!-- Редактирование в строке автодополнение --> <table id='grid'></table> <div id='pager'></div> </body> </html> |
Посмотреть конечный результат.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Выгрузка и загрузка в jqGrid».
Предыдущая статья — «Методы и свойства сводной таблицы в jqGrid».