Pivot View Manager

The Pivot View Manager can be used to manage the saved views of a pivot table. It allows you to quickly access any saved view of the pivot table at a certain point in time. You can add, delete and modify the views in the pivot view manager.

Select a saved view from the 'Views' dropdown at the bottom of the pivot table panel then press the right checkmark next to it to change the view.

Views rely on the serialize() and deserialize() API to save and restore. Serialize & Deserialize Serialize current supports the following data: Fields Options Filter Sort Layout PivotTable Position Theme Interface API Sample Code PivotTableViewManager The PivotTableViewManager is used to add, delete, modify, and check Pivot Table Views. The PivotTableViewManager and PivotTable have a one-to-one relationship, and it is initialized in the PivotTable constructor. Interface API If you set "viewList" to visible in the pivot panel, you can use it to control the views of a PivotTable. You can add, remove, and apply the views with the view list section at the bottom of the panel. You can follow these steps: Click the "▼" button, which will show the views list dialog. Click the "x" button on the right of each item in the views list dialog, which will remove the view. Enter the View Name in the input dialog, and then click the "+" button to add the View. If there is no value in the input dialog, the default name will be used instead. Click one item in the views list dialog, and the view name will show in the input dialog. Click the "√" button, which will apply the view with this name (with the Deserialize() API of PivotTable).
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(); var 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"); 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"]); sheet.setArray(0, 0, pivotSales); var sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); sheet0.setValue(0, 1, "Switch the build-in views in the pivot panel view list."); spread.resumePaint(); } function initPivotTable(sheet) { var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 2, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8); myPivotTable.suspendLayout(); var groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); var emptyPT = "Empty Pivot Table"; myPivotTable.views.save(emptyPT); // Quarterly Report myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); let styleItem = { dataOnly: true, references: [{ fieldName: "Qt", items: ["Qtr3", "Qtr4"] }] }; let style1 = new GC.Spread.Sheets.Style(); style1.formatter = '0%'; myPivotTable.setStyle(styleItem, style1); myPivotTable.views.save("Quarterly Report"); // Quantity Details myPivotTable.views.apply(emptyPT); myPivotTable.theme(GC.Spread.Pivot.PivotTableThemes.medium1); myPivotTable.options.insertBlankLineAfterEachItem = true; myPivotTable.options.mergeItem = true myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.tabular); myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("quantity", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); let style2 = new GC.Spread.Sheets.Style(); style1.formatter = '#,##0'; myPivotTable.setStyle(styleItem, style2); myPivotTable.views.save("Car Quantity Details"); // John Cars Report myPivotTable.views.apply(emptyPT); myPivotTable.options.subtotalPosition = 0; myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.compact); myPivotTable.theme(GC.Spread.Pivot.PivotTableThemes.light14); myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); var labelFilter = {textItem: {isAll: false, list: ["John"]}}; myPivotTable.labelFilter("Salesperson", labelFilter); let style3 = new GC.Spread.Sheets.Style(); style1.formatter = '$ #,##0'; myPivotTable.setStyle(styleItem, style3); myPivotTable.views.save("John Cars Report"); myPivotTable.views.apply("Quarterly Report"); new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); myPivotTable.resumeLayout(); myPivotTable.autoFitColumn(); } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script> <script src="$DEMOROOT$/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> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="sample-panel"> <div id="panel"></div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; } .sample-spreadsheets { width: calc(100% - 300px); height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .sample-panel { float: right; width: 300px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .gc-panel { padding: 10px; background-color: rgb(230, 230, 230); } #panel { position: absolute; right: 0; width: 300px; height: 100%; top: 0; } #app { height: 100%; }