Overview

SpreadJS provides an Excel-like Status Bar, located at the bottom of the spreadsheet under the sheets, that can display various sheet status and summary values. Select different ranges of cells to see how the information in the status bar changes. You can also change the theme to see how the theme changes for the status bar as well as the SpreadJS instance.

The Status Bar supports built-in themes. In addition to the themes, StatusBar supports some built-in status items, including cellMode, average, count, numericalCount, min, max, sum, and zoom. To create a Status Bar, add a host DIV element and bind it to the Spread instance, as shown in the following example: You can also change the context (spread instance) which the Status Bar binds to, or unbind the Status Bar. You can use dispose() to remove the Status Bar.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar( document.getElementById('statusBar') ); statusBar.bind(spread); }; function addThemeLink(href) { var link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = href; link.onload = function() { GC.Spread.Sheets.findControl("ss").refresh(); }; var header = document.getElementsByTagName('head')[0]; header.appendChild(link); } function bindThemeChangeEvent() { document.getElementById('theme').onchange = function(e) { var themeLink = document.querySelector('link[href*="gc.spread.sheets"]'); var href = themeLink.href.substr(0, themeLink.href.indexOf('gc.spread.sheets')) + e.target.value; var header = document.getElementsByTagName('head')[0]; themeLink && header.removeChild(themeLink); if (href) { addThemeLink(href); } else { GC.Spread.Sheets.findControl("ss").refresh(); } }; } function initSpread(spread) { var sheet = spread.getSheet(0); bindThemeChangeEvent(); }
<!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 class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> <div id="statusBar"></div> </div> <div class="sample-options"> <div class="options-toggle" role="button" data-click="toggle"> <svg fill="currentColor" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"> <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/> </svg> </div> <div class="options-container"> <div class="option-row"> <label for="theme">Choose a theme:</label> <select id="theme"> <option value="gc.spread.sheets.css">SpreadJS</option> <option value="gc.spread.sheets.excel2013white.css" selected>Excel 2013 White</option> <option value="gc.spread.sheets.excel2013lightGray.css">Excel 2013 Light Gray</option> <option value="gc.spread.sheets.excel2013darkGray.css">Excel 2013 Dark Gray</option> <option value="gc.spread.sheets.excel2016colorful.css">Excel 2016 Colorful</option> <option value="gc.spread.sheets.excel2016darkGray.css">Excel 2016 Dark Gray</option> <option value="gc.spread.sheets.excel2016black.css">Excel 2016 Black</option> </select> </div> </div> </div> </div> </body> </html>
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sample-options { float: right; height: 100%; } .options-toggle { display: none; } @media only screen and (max-width: 768px) { .options-toggle { display: block !important; top: 20px; left: -30px; width: 30px; height: 30px; position: absolute; background-color: #86bd00; line-height: 30px; text-align: center; padding: 4px; box-sizing: border-box; color: #fff; } .options-container { width: 280px !important; overflow: auto; height: 100%; padding: 22px; box-sizing: border-box; } .sample-container { width: 100% !important; height: 100%; overflow: hidden; float: left; } .sample-options { right: 0; padding: 0 !important; overflow: visible !important; position: absolute; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25); transition: right .25s ease-in-out; z-index: 1000; } .sample-options.hidden { right: -280px; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; float: left; } } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-container { width: calc(100% - 280px); height: 100%; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; } .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; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }