




已阅读5页,还剩1页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【翻译】mzPivotGrid Ext JS的数据透视表格在mzSolutions,我的工作是为Ext JS和Sencha Touch创建组件。在这篇文章中,我会告诉你如何在Sencha的Ext JS中使用mzPivotGrid。什么是数据透视表?Ext JS的Grid面板可以完美的显示大型数据集,且提供了许多功能。但它不能显示一种叫做数据透视表的数据类型。在谈到表格的时候,就会用到数据透视表,因为它可以帮助你组织和汇总数据并创建报告,它能使用户根据数据做出更明智的决策。mzPivotGrid是什么?mzPivotGrid是一个可以在Ext JS中用来创建数据透视表的组件。可以想象一下以下情形。一些销售数据带有以下字段:国家(country)、销售人员(salesperson)、订单日期(order date)、订单金额(order amoutnt)和订单ID(order ID)。如果想去编辑这些数据,可轻易的通过GridPanel并使用CellEditing或RowEditing插件来实现。如果要回答系列问题,要怎么做:每个销售人员的单击金额是多少?每个特定国家的订单金额是多少?销售人员如何在指定年份内进行操作?可以使用mzPivotGrid来创建这些报表,以下是他们的显示效果:mzPivotGrid的使用方法mzPivotGrid继承自Ext JS的Grid面板组件,因此可以使用哪些已经熟悉的功能:调整列宽、锁定列、单元格渲染器、行/单元格事件等。当需要使用GridPanel没有提供的汇总和数据透视功能的时候,就可以使用mzPivotGrid要根据销售人员和年份分解数据集,只需要使用以下代码设置顶部和左侧的轴:javascript view plaincopyleftAxis: width: 80, dataIndex: salesperson, header: Salesperson , topAxis: dataIndex: year, header: Year, direction: ASC 由于支持多层,因此可以在顶部或左侧的轴来指定他们。在这里对行或列进行分组很方便,因此可以简单的通过设置enableGrouping为true来实现。现在已经在顶部和左侧的轴分解了数据集,可以对单元格的值进行合计了。可用的聚合包括以下几种:求和、求平均值、最小值、最大值以及计数等。如果这些还不能满足需求,可以提供自己的聚合函数。javascript view plaincopyaggregate: measure: amount, header: Sales, aggregator: sum, align: right, width: 85, renderer: Ext.util.Format.numberRenderer(0,000.00) , measure: orderid, header: Qnt, aggregator: function(records, measure, matrix, rowGroupKey, colGroupKey) / do your own algorithm return records.length; , align: right, width: 85, renderer: Ext.util.Format.numberRenderer(0,000.00) 正如已经在以上例子留意到的,可以根据sales和quantity来聚合多个数据字段。可以通过设置所有所需的集合来轻松红丝线他们。用来显示的合计的行(grand totals)的行或列的设置很简单(“enableRowGrandTotals: true” or “enableColGrandTotals: true”)。分组合计(group totals)也可以通过enableRowSummary和enableColSummary来社会自。样式也很容易,甚至可通过定义单元格渲染器来实现。数据透视表可以使用Ext JS中任何类型的Store,因而在Store对象中对数据进行过滤也相当容易。这意味着可以实现一个插件来处理过滤。Ext JS的数据模型类相当的棒,可以通过它强大的convert功能来扩展模型和在自定义的分组间隔内分解数据。例如以下示例:javascript view plaincopyfields: name: orderid, type: int, name: salesperson, type: string, name: country, type: string, name: orderdate, type: date, dateFormat: d/m/Y, name: amount, type: int, name: person-range, convert: function(v, record) if(/a-j/i.test(record.get(salesperson) return A-J; if(/k-s/i.test(record.get(salesperson) return K-S; if(/t-z/i.test(record.get(salesperson) return T-Z; return v; , name: year, convert: function(v, record) return Ext.Date.format(record.get(orderdate), Y); 显示效果如下:一个示例用例:javascript view plaincopy var pivotGrid = Ext.create(Mz.pivot.Grid, title: Pivot grid, height: 400, width: 600, enableLocking: false, enableGrouping: true, viewConfig: trackOver: true, stripeRows: false , store: store, aggregate: measure: amount, header: Sales, aggregator: sum, align: right, width: 85, renderer: Ext.util.Format.numberRenderer(0,000.00) , caption: Sales report, leftAxis: width: 80, dataIndex: salesperson, head
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026届陕西省西安市莲湖区化学高三第一学期期中调研试题含解析
- 山东省济南市实验中学2026届化学高一第一学期期末质量跟踪监视试题含解析
- 2025年秋季部编版初中数学教学设计八年级上册13.4 课题学习 最短路径问题
- 圣诞节公司活动策划方案
- 五一劳动节文艺晚会策划方案
- 幼儿园活动实施策划方案
- 关于初三体育教学工作方案
- 大班配班个人工作方案
- 电仪监理面试题及答案
- 中平电动车考试试题及答案
- 2025年留疆战士考试题库及答案
- 2025广西专业技术人员公需科目培训考试答案
- 护士延续注册申请审核表
- CIE1931-色坐标-三刺激值
- GB/T 531.1-2008硫化橡胶或热塑性橡胶压入硬度试验方法第1部分:邵氏硬度计法(邵尔硬度)
- 中航工业运营管理体系内容介绍课件
- 消化系统疾病课件整理
- 子宫肉瘤诊疗指南
- 培训注塑成型原理
- 2009-2022历年江苏省镇江市丹阳市事业单位考试《综合知识和能力素质(计算机类岗位)》真题含答案2022-2023上岸必备带详解版3
- 交流电气装置的过电压保护及绝缘配合
评论
0/150
提交评论