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("Quarters (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("Quarters (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("Quarters (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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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%;
}
