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

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

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

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

Данные

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

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

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

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"
	});
});

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:

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

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') имеет следующую структуру:

{"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"},
...
]}

{"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:

...
xDimension : [
   {
       dataName: 'CategoryName',
       label : 'Категория',
       width : 90
   }, {
       dataName: 'ProductName',
       label: 'Продукт',
       width: 90
   }
]

...

xDimension : [

{

dataName: 'CategoryName',

label : 'Категория',

width : 90

}, {

dataName: 'ProductName',

label: 'Продукт',

width: 90

}

]

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

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

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

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

...
yDimension : [
   {
      dataName: 'Country'
   }
]

...

yDimension : [

{

dataName: 'Country'

}

]

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

aggregates : [
	{
           member : 'Price', 
           aggregator : 'sum', 
           width:50,
           label:'Сумма'
        }, {
           member : 'Quantity', 
           aggregator : 'sum', 
           width:50,
           label:'Кол-во'
        }
]

aggregates : [

{

member : 'Price',

aggregator : 'sum',

width:50,

label:'Сумма'

}, {

member : 'Quantity',

aggregator : 'sum',

width:50,

label:'Кол-во'

}

]

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

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

<!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>

<!DOCTYPE HTML>

<html>

<head>

<title>jqPivotGrid example</title>

</script>

</script>

</script>

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>

Статья с описанием примера сводной таблицы в jqGrid (Pivot Table)</a>

<p>

</p>

</body>

</html>

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

Цикл статей «Документация 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

Данные

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

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