The status bar can display various sheet status and summary values. Select different ranges of cells to see how the information in the status bar changes.
This is the sample code:
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tableName = "Customer";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var myView;
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
var statusBar = initStatusBar(spread);
initSpread(spread, statusBar);
};
function initSpread(spread, statusBar) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
//add customer table
var customerTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
myView = customerTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CompanyName", width: 200, caption :"Company Name" },
{ value: "ContactName", width: 150, caption :"Contact" },
{ value: "ContactTitle", width: 200, caption :"Title" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"City" },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]);
myView.fetch().then(function() {
sheet.setDataView(myView);
if (statusBar) {
var recordItem = statusBar.get("recordCountItem");
if (recordItem) {
recordItem.dataSourceLength = myView.length();
recordItem.visibleLength = myView.visibleLength();
recordItem.onUpdate();
}
}
});
spread.resumePaint();
}
function initStatusBar(spread) {
//define custom status item
var StatusItem = GC.Spread.Sheets.StatusBar.StatusItem;
function RecordCountItem(name, options) {
StatusItem.call(this, name, options);
this._value = 1;
this.dataSourceLength = 0;
this.visibleLength = 0;
}
RecordCountItem.prototype = new StatusItem();
RecordCountItem.prototype.onCreateItemView = function(container) {
var element = this._element;
if (!element) {
element = this._element = document.createElement("span");
element.innerHTML = " Rows: <b>" + this.visibleLength + "</b> of <b>" + this.dataSourceLength + "</b> - Record Count: <b>" + this._value + "</b>";
}
container.appendChild(element);
};
RecordCountItem.prototype.onBind = function(context) {
var _this = this;
context.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) {
_this._value = getRowCount(args.newSelections);
_this.onUpdate();
});
context.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, args) {
_this.dataSourceLength = myView.length();
_this.visibleLength = myView.visibleLength();
_this.onUpdate();
});
context.bind(GC.Spread.Sheets.Events.RangeFilterCleared, function (e, args) {
_this.dataSourceLength = myView.length();
_this.visibleLength = myView.visibleLength();
_this.onUpdate();
});
};
RecordCountItem.prototype.onUpdate = function() {
StatusItem.prototype.onUpdate.call(this);
this._element.innerHTML = " Rows: <b>" + this.visibleLength + "</b> of <b>" + this.dataSourceLength + "</b> - Record Count: <b>" + this._value + "</b>";
};
//init status bar
var recordCountItem = new RecordCountItem('recordCountItem', { menuContent: 'Record Count', value: 0 });
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'), {
items: [recordCountItem]
});
statusBar.bind(spread);
return statusBar;
}
function getRowCount(selections) {
var selectedRows = {};
for (var i = 0; i < selections.length; i++) {
var row = selections[i].row;
var rowCount = selections[i].rowCount;
if (row === -1) {
return rowCount;
}
for (var c = 0; c < rowCount; c++) {
selectedRows[row + c] = true;
}
}
return Object.keys(selectedRows).length;
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
<!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">
<!-- 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$/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-tablesheet/dist/gc.spread.sheets.tablesheet.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 id="statusBar"></div>
<div id="optionContainer" class="optionContainer">
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#statusBar {
height: 25px;
width: 100%;
}
.sample-spreadsheets {
width: 100%;
height: calc(100% - 25px);
overflow: hidden;
}
