概述
本 Demo 展示了如何获取数据透视表的详细信息功能。当用户点击透视表中的数据单元格时，系统会从数据源中查找所有被合并的详细数据，并在右侧的详细信息表格中展示。这对于需要追溯汇总数据来源的场景非常有用。
实现思路
创建两个 Workbook：一个用于显示数据透视表，一个用于显示详细信息
在第一个工作表中创建数据源表格，包含销售员、车型、日期、数量、单价、总价等字段
在第二个工作表中创建数据透视表，按销售员和车型分组，按季度分列，汇总总价
绑定单元格点击事件，点击透视表数据单元格时获取节点信息
使用节点信息的 fieldInfos 调用 getPivotDetails 获取详细数据
在详细信息表格中展示获取到的原始数据明细
代码解析
获取透视表节点信息
这段代码通过 getNodeInfo 方法获取点击单元格的节点信息，包含该单元格所属的行字段、列字段信息。然后使用 nodeInfo.fieldInfos 调用 getPivotDetails 获取该汇总值对应的所有原始数据记录，返回一个二维数组。
绑定单元格点击事件
当用户点击透视表单元格时，触发 CellClick 事件。事件处理函数获取点击位置的行列信息，调用 getPivotDetails 获取详细数据，然后在详细信息表格中创建表格并填充数据。
创建透视表配置
这段代码创建了一个数据透视表，配置了行字段（销售员、车型）、列字段（季度）和值字段（总价求和）。通过日期分组功能将日期字段按季度分组。
运行效果
左侧显示数据透视表，按销售员和车型分组，按季度分列，显示总价汇总
点击透视表中的任意数据单元格（例如某销售员某季度的总价）
右侧的详细信息表格会显示该汇总值对应的所有原始销售记录
详细信息表格显示完整的原始数据行，包括日期、销售员、车型、数量、单价、总价等字段
顶部提示文字说明此功能的作用
API 参考
getNodeInfo 方法
row：工作表行索引
col：工作表列索引
返回值：IPivotNodeInfo 对象，包含 fieldInfos（字段信息数组）和 valueInfo（值字段信息）
getPivotDetails 方法
pivotItemInfo：IPivotItemInfo 数组，每个对象包含 fieldName（字段名）和 fieldItem（字段项）
返回值：二维数组，包含所有匹配的原始数据行；如果没有匹配数据则返回 void
IPivotItemInfo 接口
fieldName：字段名称
fieldItem：字段项值
window.onload = function () {
let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
let detailsSpread = new GC.Spread.Sheets.Workbook(document.getElementById("pivot-details"), { sheetCount: 1 });
initSpread(spread, detailsSpread);
};
function initSpread(spread, detailsSpread) {
spread.suspendPaint();
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
let tableName = getDataSource(sheet1, pivotSales);
let pivotTable = initPivotTable(sheet2, tableName);
spread.setActiveSheet("PivotTable");
let detailsSheet = detailsSpread.getSheet(0);
detailsSheet.name("PivotTable Details");
addEvent(sheet2, detailsSheet, pivotTable);
spread.resumePaint();
}
function addEvent(sheet2, detailsSheet, pivotTable) {
detailsSheet.setRowCount(700);
detailsSheet.setColumnCount(10);
detailsSheet.addSpan(0, 0, 2, 6);
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
detailsSheet.setStyle(0, 0, style);
detailsSheet.setValue(0, 0, "在 SpreadJS 的数据透视表中，显示明细功能将查找数据源中所有合并的数据");
sheet2.bind(GC.Spread.Sheets.Events.CellClick, (sender, args) => {
detailsSheet.suspendPaint();
let dataSource = getPivotDetails(args.row, args.col, pivotTable);
detailsSheet.tables.remove("details");
if (dataSource) {
var table = detailsSheet.tables.add('details', 2, 0, dataSource.length, dataSource[0].length);
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
}
detailsSheet.getCell(-1, 0).formatter("YYYY-mm-DD");
detailsSheet.getRange(-1, 4, 0, 2).formatter("$ #,##0");
detailsSheet.setColumnWidth(0, 120);
detailsSheet.setArray(2, 0, dataSource);
detailsSheet.resumePaint();
});
}
function getPivotDetails(row, col, pivotTable) {
let nodeInfo = pivotTable.getNodeInfo(row, col);
if (!nodeInfo) {
return void 0;
}
let dataSource = pivotTable.getPivotDetails(nodeInfo.fieldInfos);
return dataSource;
}
function setDetails(rowOrColInfo, detailsObj) {
if (rowOrColInfo && rowOrColInfo.length > 0) {
for (let item of rowOrColInfo) {
if (item.isGrandTotal) {
break;
}
detailsObj.push({ fieldName: item.fieldName, fieldItem: item.itemName });
}
}
}
function getDataSource(sheet, tableSource) {
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('table', 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, tableSource);
return table.name();
}
function initPivotTable(sheet, tableName) {
sheet.name("PivotTable");
sheet.setRowCount(1000);
let option = {
showRowHeader: true,
showColumnHeader: true,
bandRows: true,
bandColumns: true
};
let pivotTable = sheet.pivotTables.add("pivotTable", tableName, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium8, option);
pivotTable.suspendLayout();
pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
pivotTable.group(groupInfo);
pivotTable.add("季度 (date)", "季度 (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let style = new GC.Spread.Sheets.Style();
style.formatter = "$ #,##0";
pivotTable.setStyle({ dataOnly: true }, style);
pivotTable.resumeLayout();
pivotTable.autoFitColumn();
return pivotTable;
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<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="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.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 id="pivot-details" class="sample-spreadsheets-details">
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
width: 60%;
height: 100%;
overflow: hidden;
float: left;
}
.sample-spreadsheets-details{
width: 40%;
height: 100%;
overflow: hidden;
float: left;
}
