在前端集成数据透视表：简要教程
使用SpreadJS，要建立一个如图所示的前端嵌入式数据透视表是非常简单的：
上图中的PivotLayout工作簿是数据透视表的页面，DataSource是原始数据页面，图右侧的面板就是SpreadJS生成的数据透视面板，用户可以在这里调整所需的字段，从而改变左侧数据透视表的展示信息。
在数据透视表中，存在四个区域:
- Filters: 控制数据透视表的数据范围。
- Columns: 控制数据透视表的列分布。
- Rows: 控制数据透视表的行分布。
- Values: 控制数据透视表的计算数据和计算方法。
输入以下代码即可创建数据透视表面板:
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
用户必须为"panel"元素设置宽和高 。
GC.Spread.Pivot.PivotPanel构造函数参数如下：
以下是使用标准JS代码嵌入数据透视表的app.js文件：
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); initPivotTable(pivotLayoutSheet); }; function initSpread(spread) { spread.suspendPaint(); let sheet = spread.getSheet(1); sheet.name("DataSource"); sheet.setRowCount(117); sheet.setColumnWidth(0, 120); sheet.getCell(-1, 0).formatter("YYYY-mm-DD"); sheet.getRange(-1,4,0,2).formatter("$ #,##0"); sheet.setArray(0, 0, pivotSales); let table = sheet.tables.add('tableSales', 0, 0, 117, 6); for(let i=2;i<=117;i++) { sheet.setFormula(i-1,5,'=D'+i+'*E'+i) } table.style(GC.Spread.Sheets.Tables.TableThemes["none"]); let sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); } function initPivotTable(sheet) { let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8); myPivotTable.suspendLayout(); myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField); let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area); myPivotTable.resumeLayout(); myPivotTable.autoFitColumn(); } function _getElementById(id) { return document.getElementById(id); }
对应的html页面中加入的插件代码：
<head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/data/pivot-data.js" type="text/javascript"></script> <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
可以看到，总共60行左右的代码即可在一个web页面中嵌入数据透视表和透视表控制面板。
SpreadJS除了支持标准JS代码外，还支持Angular、Vue和React框架。使用Angular时需要单独创建一个app.component.html页面，Vue和React的app文件代码也会更长一些，并且要把插件导入的代码段放在app文件中。
此外，数据透视表面板只是一个控制数据透视表的工具，它在使用fromJSON时会自动释放。 数据透视表可以在没有数据透视表面板的情况下工作。所以数据透视表支持下面的api来处理面板和数据透视表之间的关系。
将数据透视面板附加到数据透视表：
///* function attach(pivotTable: GC.Spread.Pivot.PivotTable) :void
/**
* @description this function will attach to a pivot table
* @param pivotTable
* @returns void
*/
attach (pivotTable: IPivotTable): void
从数据透视表中分离数据透视面板：
///* function attach(): void
/**
* @description this function will detach to a pivot table
* @returns void
*/
detach (): void
销毁数据透视表面板：
///* function destroy (): void
/**
* @description destroy PivotPanel
*/
destroy (): void
除了透视表，你的前端还能做到这些
SpreadJS的强大并非止于数据透视表。SpreadJS是葡萄城结合40余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件，发展到今天功能已成为功能足以与Excel相媲美的在线表格控件。SpreadJS在界面和功能上与Excel高度类似，可以为企业信息化系统提供 表格文档协同编辑、数据填报和类Excel报表设计的应用场景支持。使用SpreadJS可直接在Angular、React、Vue等前端框架中实现高效的模板设计、在线编辑和数据绑定等功能，为最终用户提供高度类似Excel的使用体验。
SpreadJS使用时无需预装任何插件或第三方组件，具备流畅的交互体验，并可直接在浏览器内导入导出Excel、CSV、JSON等文件。SpreadJS兼容数百种Excel计算公式，内置18种条件格式、32种图表、53项单元格格式和182种形状，且支持触摸操作，具备纯中文界面。
值得一提的是，SpreadJS在构建界面时并没有采取传统的DOM拼接方式，而是使用HTML5 Canvas 绘制技术，在提升性能的同时打破了DOM元素渲染对UI的诸多限制，实现了更精准的UI界面渲染效果。该技术已获得国家知识产权局颁发的发明专利证书。
在最新的SpreadJS 15.0 Update 1版本中，还加入了跨工作簿公式函数支持、日期切片器、Vue3框架支持等更新内容。随着SpreadJS的不断更新和发展，这款工具已经成为现代企业在各类业务场景中实现在线Excel功能、随时随地满足数据处理、分析和展示需求的最佳选项之一。点击以下链接可进一步了解SpreadJS的强大能力，早日提升企业数据生产力。
前端表格数据透视表在线示例：
https://demo.grapecity.com.cn...
葡萄城前端表格控件SpreadJS
https://www.grapecity.com.cn/...
类Excel全栈解决方案：https://www.grapecity.com.cn/...
