Users can show the table total row by using the showFooter API. By default, the total row will be displayed as the last table row. You can also insert the table row in the data using isFooterInserted.
You can insert the totals row and display the dropdown functions using the following code:
You can also get the visibility of the totals row and dropdown using the following code:
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 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$/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;
}
