概述
本 Demo 展示了如何为表格添加汇总行，并通过下拉列表快速选择汇总公式。Demo 中演示了汇总行的启用方式、下拉列表的配置，以及通过复选框动态控制汇总行显示状态的交互方式。
实现思路
创建表格并设置主题样式，加载数据源
启用汇总行显示（showFooter 方法）
启用汇总行下拉列表（useFooterDropDownList 方法）
绑定复选框事件，动态控制汇总行和下拉列表的显示
代码解析
创建表格并启用汇总行
这段代码创建了名为 table1 的表格，位于工作表的第 0 行第 0 列，包含 5 行 13 列数据，使用 light1 主题样式。showFooter(true) 启用汇总行显示，汇总行将作为表格的最后一行。useFooterDropDownList(true) 启用汇总行下拉列表，用户点击汇总行单元格时可选择汇总公式。
动态控制汇总行显示
这段代码绑定复选框的点击事件，通过 table.showFooter() 方法动态控制汇总行的显示和隐藏。findByName() 方法根据表格名称查找表格对象。
控制下拉列表显示
这段代码通过 table.useFooterDropDownList() 方法控制汇总行下拉列表的显示。当启用时，用户点击汇总行单元格会显示包含"无"、"平均"、"计数"、"最大"、"最小"、"求和"等选项的下拉列表。
运行效果
表格底部显示汇总行，作为表格的最后一行
点击汇总行单元格时，显示下拉列表，可选择不同的汇总公式（求和、平均值、计数等）
页面右侧提供两个复选框：
"Show TotalRow"：控制汇总行的显示和隐藏
"TotalRow DropDownList"：控制汇总行下拉列表的启用和禁用
API 参考
showFooter 方法
value：可选，boolean 类型，是否显示汇总行
isFooterInserted：可选，boolean 类型，是否在数据中插入汇总行。默认为 false，汇总行显示在表格最后一行；设置为 true 时，会在数据区域插入一行作为汇总行
useFooterDropDownList 方法
value：可选，boolean 类型，是否在汇总行显示下拉列表。启用后，用户点击汇总行单元格可选择汇总公式
tables.add 方法
name：表格名称
row、column：表格起始位置（行索引、列索引）
rowCount、columnCount：表格行数和列数
style：可选，表格主题样式
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
var table = sheet.tables.add("table1", 0, 0, 5, 13, spreadNS.Tables.TableThemes.light1);
table.showFooter(true);
table.useFooterDropDownList(true);
sheet.setActiveCell(5, 4);
var dataArray = [
[" ", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
];
sheet.setArray(0, 0, dataArray);
sheet.setColumnWidth(0, 120);
spread.resumePaint();
_getElementById("showTotal").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.findByName("table1");
if (table) {
try {
table.showFooter(_getElementById("showTotal").checked);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
});
_getElementById("dropdownList").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.findByName("table1");
if (table) {
try {
table.useFooterDropDownList(_getElementById("dropdownList").checked);
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!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-resources-zh/dist/gc.spread.sheets.resources.zh.min.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-group">
<input style="width: 20px;float: left;" type="checkbox" id="showTotal" checked="checked" />
<label for="showTotal">Show TotalRow</label>
</div>
<div class="option-group">
<input style="width: 20px;float: left;" type="checkbox" id="dropdownList" checked="checked" />
<label for="resizeColumn">TotalRow DropDownList</label>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 6px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 2px 4px;
width: 100%;
box-sizing: border-box;
}
input[type=button] {
margin-bottom: 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin: 5px 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
