概述
本 Demo 展示了 TableSheet（集算表）的分组功能，通过 groupBy 方法按 Category 字段对订单数据进行分组，并配置汇总列和切片列来展示分组统计数据。
实现思路
使用 DataManager 创建数据表，加载订单数据源
创建视图并绑定到 TableSheet
配置分组选项：按 Category 字段分组，设置分组列样式
为分组添加两个汇总列：数量求和（Σ）和金额平均值（μ）
为汇总列配置切片：按 Office 字段和订单日期年份进行数据切片
通过按钮调用 groupBy 和 removeGroupBy 方法来切换分组状态
代码解析
设置分组
这段代码配置了分组选项：
field: "Category"：指定按 Category 字段分组
caption、width、style：设置分组列的标题、宽度和样式
summaryFields：定义汇总列数组，每个汇总列包含：
formula：汇总公式，如 =SUM([Quantity]) 计算数量总和
slice：切片配置，可以将汇总结果按指定字段拆分成多列
第一个汇总列按 Office 字段切片，第二个按订单日期的年份切片（使用公式 =YEAR([@OrderDate])）
取消分组
调用 removeGroupBy() 方法可以移除所有分组设置，恢复原始表格视图。
运行效果
页面加载后显示未分组的订单数据表格
点击「分组」按钮，表格按 Category 字段分组，相同类别的行自动合并
分组列左侧显示两个汇总列：数量总和和金额平均值
每个汇总列会根据切片字段拆分成多列，分别显示不同 Office 和年份的统计数据
点击「取消分组」按钮，表格恢复到未分组状态
API 参考
groupBy 方法
options：分组选项数组
field：分组字段名称或公式
caption：分组列标题
width：分组列宽度
style：分组列样式
summaryFields：汇总字段数组，包含 formula、slice 等配置
removeGroupBy 方法
移除表格的所有分组设置。
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var ordersTable = dataManager.addTable("ordersTable", {
data: orderDataSource,
schema: {
type: "csv",
columns: {
OrderDate: { dataType: "date" },
ShipDate: { dataType: "date" },
Quantity: { dataType: "number" },
Amount: { dataType: "number" }
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
ordersTable.fetch().then(function () {
var myView = ordersTable.addView("myView", [
{ value: "OrderID", caption: "ID", width: 100 },
{ value: "Product", width: 150 },
{ value: "OrderDate", caption: "Order Date", width: 105 },
{ value: "ShipDate", caption: "Ship Date", width: 105 },
{ value: "Quantity", width: 100 },
{ value: "Amount", width: 100 },
{ value: "Office", width: 100 },
{ value: "Category", width: 150 }
]);
spread.suspendPaint();
sheet.setDataView(myView);
groupCallback();
spread.resumePaint();
});
spread.resumePaint();
var groupCallback = function () {
sheet.groupBy([
{
caption: "Category", field: "Category", width: 120, style: { backColor: "#D0CECE" }, summaryFields: [
{
caption: "Σ(Quantity)",
formula: "=SUM([Quantity])",
slice: {field: "Office", width: 70, style: {backColor: "#D9E1F2"}},
width: 105,
style: {backColor: "#D9E1F2"}
},
{
caption: "μ(Amount)",
formula: "=AVERAGE([Amount])",
slice: {field: "=YEAR([@OrderDate])", width: 80, style: {backColor: "#E2EFDA", formatter: "$ #,##0.00"}},
width: 100,
style: {backColor: "#E2EFDA", formatter: "$ #,##0.00"}
}
]
}
]);
};
var groupButton = document.getElementById("groupButton");
groupButton.addEventListener("click", groupCallback);
var removeGroupButton = document.getElementById("removeGroupButton");
removeGroupButton.addEventListener("click", function () {
sheet.removeGroupBy();
});
}
<!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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<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-tablesheet/dist/gc.spread.sheets.tablesheet.min.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="$DEMOROOT$/spread/source/data/orderDataSource.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="options-container">
<div class="option-row">
<label>使用下方按钮进行分组或取消分组。</label>
</div>
<div class="option-row">
<input type="button" value="分组" id="groupButton" />
<input type="button" value="取消分组" id="removeGroupButton" />
</div>
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 210px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 210px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 3px;
margin-top: 3px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width: 100%;
text-align: center;
}
input[type=text] {
width: 230px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
