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 of 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 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 Pivot Table ViewManager Used to add, delete, modify, and check Pivot Table Views. PivotTableViewManager and PivotTable have a one-to-one relationship. PivotTableViewManager is initialized in the PivotTable constructor. Interface API If you set "viewList" to visible in pivot panel, you can use view list to control the views of pivotTable. you can add, remove, apply the views by view list section at the bottom of the panel. 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 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, the view name will show in the input dialog. Then click the "√" button, will apply the view with this name ( by 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-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%; }