本篇文章探讨了JavaScript基础教程之mzPivotGrid: Ext JS的数据透视表格，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

在这篇文章中，我会告诉你如何在Sencha的Ext JS中使用mzPivotGrid。

什么是数据透视表？

Ext JS的Grid面板可以完美的显示大型数据集，且提供了许多功能。但它不能显示一种叫做数据透视表的数据类型。在谈到表格的时候，就会用到数据透视表，因为它可以帮助你组织和汇总数据并创建报告，它能使用户根据数据做出更明智的决策。

mzPivotGrid是什么？

mzPivotGrid 是一个可以在Ext JS中用来创建数据透视表的组件。可以想象一下以下情形。一些销售数据带有以下字段：国家（country）、销售人员（salesperson）、订单 日期（order date）、订单金额（order amoutnt）和订单ID（order ID）。如果想去编辑这些数据，可轻易的通过GridPanel并使用CellEditing或RowEditing插件来实现。

如果要回答系列问题，要怎么做：

1. 每个销售人员的单击金额是多少？

2. 每个特定国家的订单金额是多少？

3. 销售人员如何在指定年份内进行操作？

可以使用mzPivotGrid来创建这些报表，以下是他们的显示效果：

mzPivotGrid的使用方法

mzPivotGrid继承自Ext JS的Grid面板组件，因此可以使用哪些已经熟悉的功能：调整列宽、锁定列、单元格渲染器、行/单元格事件等。当需要使用GridPanel没有提供的汇总和数据透视功能的时候，就可以使用mzPivotGrid

要根据销售人员和年份分解数据集，只需要使用以下代码设置顶部和左侧的轴：

[javascript] view plaincopy

1. leftAxis: [{  

2.     width:      80,  

3.     dataIndex:  'salesperson',  

4.     header:     'Salesperson'  

5. }],  

6.    

7. topAxis: [{  

8.     dataIndex:  'year',  

9.     header:     'Year',  

10.     direction:  'ASC'  

11. }]  

由于支持多层，因此可以在顶部或左侧的轴来指定他们。在这里对行或列进行分组很方便，因此可以简单的通过设置enableGrouping为true来实现。
现在已经在顶部和左侧的轴分解了数据集，可以对单元格的值进行合计了。可用的聚合包括以下几种：求和、求平均值、最小值、最大值以及计数等。如果这些还不能满足需求，可以提供自己的聚合函数。

[javascript] 

1. aggregate: [{  

2.     measure:    'amount',  

3.     header:     'Sales',  

4.     aggregator: 'sum',  

5.     align:      'right',  

6.     width:      85,  

7.     renderer:   Ext.util.Format.numberRenderer('0,000.00')  

8. },{  

9.     measure:    'orderid',  

10.     header:     'Qnt',  

11.     aggregator: function(records, measure, matrix, rowGroupKey, colGroupKey) {  

12.         // do your own algorithm  

13.         return records.length;  

14.     },  

15.     align:      'right',  

16.     width:      85,  

17.     renderer:   Ext.util.Format.numberRenderer('0,000.00')  

18. }]  

正如已经在以上例子留意到的，可以根据sales和quantity来聚合多个数据字段。可以通过设置所有所需的集合来轻松红丝线他们。

用 来显示的合计的行（grand totals）的行或列的设置很简单（“enableRowGrandTotals: true” or “enableColGrandTotals: true”）。分组合计（group totals）也可以通过enableRowSummary和enableColSummary来社会自。样式也很容易，甚至可通过定义单元格渲染器来实 现。
数据透视表可以使用Ext JS中任何类型的Store，因而在Store对象中对数据进行过滤也相当容易。这意味着可以实现一个插件来处理过滤。
Ext JS的数据模型类相当的棒，可以通过它强大的convert功能来扩展模型和在自定义的分组间隔内分解数据。例如以下示例：

[javascript] 

1. fields: [  

2.     {name: 'orderid',       type: 'int'},  

3.     {name: 'salesperson',   type: 'string'},  

4.     {name: 'country',       type: 'string'},  

5.     {name: 'orderdate',     type: 'date', dateFormat: 'd/m/Y'},  

6.     {name: 'amount',        type: 'int'},  

7.     {  

8.         name: 'person-range',  

9.         convert: function(v, record){  

10.             if(/^[a-j]/i.test(record.get('salesperson'))) return 'A-J';  

11.             if(/^[k-s]/i.test(record.get('salesperson'))) return 'K-S';  

12.             if(/^[t-z]/i.test(record.get('salesperson'))) return 'T-Z';  

13.             return v;  

14.         }  

15.     },{  

16.         name: 'year',  

17.         convert: function(v, record){  

18.             return Ext.Date.format(record.get('orderdate'), ""Y"");  

19.         }  

20.     }  

21. ]  

22.    

显示效果如下：

一个示例用例：

[javascript]

1.  var pivotGrid = Ext.create('Mz.pivot.Grid', {  

2.     title:          'Pivot grid',  

3.     height:         400,  

4.     width:          600,  

5.     enableLocking:  false,  

6.     enableGrouping: true,  

7.     viewConfig: {  

8.         trackOver:      true,  

9.         stripeRows:     false  

10.     },  

11.     store: store,  

12.     aggregate: [{  

13.         measure:    'amount',  

14.         header:     'Sales',  

15.         aggregator: 'sum',  

16.         align:      'right',  

17.         width:      85,  

18.         renderer:   Ext.util.Format.numberRenderer('0,000.00')  

19.     }],  

20.     caption:  'Sales report',  

21.     leftAxis: [{  

22.         width:      80,  

23.         dataIndex:  'salesperson',  

24.         header:     'Sales Person'  

25.     }],  

26.     topAxis: [{  

27.         dataIndex:  'year',  

28.         header:     'Year',  

29.         direction:  'ASC'  

30.     }]  

31. });  

  本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！